@extends('layouts.mainlayout')
@section('title', 'Manage Schedule')
@section('main')
<!-- Form validation -->
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-users4 font-weight-bold">Add Schedules</h5>
    </div>
    <div class="card-body">
      
        <form class="form-validate-jquery" action="{{ route('added.store') }}" method="POST">
      
            @csrf
            <fieldset class="mb-3">
                <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="schedule" name="name" placeholder="Schedule Name" value="" class="form-control @error('team') is-invalid @enderror" / required>
                       
                
                    </div>
                  </div>
                     <input type="hidden" id="team_id"  name="team_id" value="{{$team->id}}">
                      <input type="hidden" id="is_active"  name="is_active" value="0">
                     

                  
                 <div class="form-group row">
                    <label class="col-form-label col-lg-3">From Date
                        <span class="text-danger"></span></label>
                    <div class="col-lg-9">

                       <input type="text" id="from_date" data-date-format="{{ config('settings.date_format') }}" name="from_date" placeholder="{{ config('settings.date_format') }}"  value="" class="form-control @error('team') is-invalid @enderror" readonly />
                
                    </div>
                  </div>

                  
                <div class="form-group row">
                    <label class="col-form-label col-lg-3">To Date
                        <span class="text-danger"></span></label>
                    <div class="col-lg-9">

                       <input type="text" id="to_date" data-date-format="{{ config('settings.date_format') }}" name="to_date" placeholder="{{ config('settings.date_format') }}"  value="" class="form-control @error('team') is-invalid @enderror" readonly / >
                
                    </div>
                  </div>
                      <div class="col-md-12">
                         <div class="form-group">
                             <legend class="text-uppercase font-size-sm font-weight-bold"> </legend>
                             <label class="col-form-label ">Set as a default</label>
                              <div class="col-md-9">
                                <input type="checkbox" id="default_checkbox" name="is_default" value="1"/>
                              </div>
                          </div>
                          <h3> <lebal>Team Name:- </lebal>{{@$team->team}}</h3>
                          <br>
 
                          @foreach($teamUsers as $teamUser)
                            <table class="table">
                              <label>Team Member:-</label>{{$teamUser->user['name']}}
                              <thead>
                                <tr>
                                  <th>Work Days</th>
                                  <th>M</th>
                                  <th>T</th>
                                  <th>W</th>
                                  <th>T</th>
                                  <th>F</th>
                                  <th>S</th>
                                  <th>S</th>
                                </tr>
                              </thead>
                               @foreach($teamShifts as $teamShift)
                               @if($teamShift->shift != NULL)
                              <tbody>
                          <tr>
                            <td>{{$teamShift->shift->shift}} </td>
                            <td><input type="checkbox" id="monday" name="mon_{{$teamUser->user_id}}_{{$teamShift->shift_id}}" data-userid="{{$teamUser->user_id}}" data-start="{{ \Carbon\Carbon::parse($teamShift->shift->start_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-end="{{ \Carbon\Carbon::parse($teamShift->shift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}"  data-range-buffer-on-checkin="{{ $teamShift->shift->range_buffer_on_checkin ?? '00:00:00'}}" data-range-buffer-on-checkout="{{$teamShift->shift->range_buffer_on_checkout ?? '00:00:00'}}" data-buffer-checkin="{{ $teamShift->shift->buffer_on_checkin}}" data-buffer-checkout="{{ $teamShift->shift->buffer_on_checkout }}" value="1"></td>
                        <td><input type="checkbox" id="tuesday"  data-userid="{{$teamUser->user_id}}" name="tue_{{$teamUser->user_id}}_{{$teamShift->shift_id}}" data-start="{{ \Carbon\Carbon::parse($teamShift->shift->start_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-end="{{ \Carbon\Carbon::parse($teamShift->shift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->shift->range_buffer_on_checkin ?? '00:00:00'}}" data-range-buffer-on-checkout="{{$teamShift->shift->range_buffer_on_checkout ?? '00:00:00'}}" data-buffer-checkin="{{ $teamShift->shift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->shift->buffer_on_checkout }}" value="1"></td>
                        <td><input type="checkbox" id="wednesday"  data-userid="{{$teamUser->user_id}}" name="wed_{{$teamUser->user_id}}_{{$teamShift->shift_id}}" data-start="{{ \Carbon\Carbon::parse($teamShift->shift->start_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-end="{{ \Carbon\Carbon::parse($teamShift->shift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->shift->range_buffer_on_checkin ?? '00:00:00'}}" data-range-buffer-on-checkout="{{$teamShift->shift->range_buffer_on_checkout ?? '00:00:00'}}" data-buffer-checkin="{{ $teamShift->shift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->shift->buffer_on_checkout }}" value="1"></td>
                        <td><input type="checkbox" id="thursday"  data-userid="{{$teamUser->user_id}}" name="thu_{{$teamUser->user_id}}_{{$teamShift->shift_id}}" data-start="{{ \Carbon\Carbon::parse($teamShift->shift->start_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-end="{{ \Carbon\Carbon::parse($teamShift->shift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->shift->range_buffer_on_checkin ?? '00:00:00'}}" data-range-buffer-on-checkout="{{$teamShift->shift->range_buffer_on_checkout ?? '00:00:00'}}" data-buffer-checkin="{{ $teamShift->shift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->shift->buffer_on_checkout }}" value="1"></td>
                        <td><input type="checkbox" id="friday"  data-userid="{{$teamUser->user_id}}" name="fri_{{$teamUser->user_id}}_{{$teamShift->shift_id}}" data-start="{{ \Carbon\Carbon::parse($teamShift->shift->start_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-end="{{ \Carbon\Carbon::parse($teamShift->shift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->shift->range_buffer_on_checkin ?? '00:00:00'}}" data-range-buffer-on-checkout="{{$teamShift->shift->range_buffer_on_checkout ?? '00:00:00'}}" data-buffer-checkin="{{ $teamShift->shift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->shift->buffer_on_checkout }}" value="1"></td>
                        <td><input type="checkbox" id="saturday"  data-userid="{{$teamUser->user_id}}" name="sa_{{$teamUser->user_id}}_{{$teamShift->shift_id}}"  data-start="{{ \Carbon\Carbon::parse($teamShift->shift->start_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-end="{{ \Carbon\Carbon::parse($teamShift->shift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->shift->range_buffer_on_checkin ?? '00:00:00'}}" data-range-buffer-on-checkout="{{$teamShift->shift->range_buffer_on_checkout ?? '00:00:00'}}" data-buffer-checkin="{{ $teamShift->shift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->shift->buffer_on_checkout }}" value="1"></td>
                        <td><input type="checkbox" id="sunday"  data-userid="{{$teamUser->user_id}}" name="sun_{{$teamUser->user_id}}_{{$teamShift->shift_id}}" data-start="{{ \Carbon\Carbon::parse($teamShift->shift->start_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-end="{{ \Carbon\Carbon::parse($teamShift->shift->end_time)->setTimezone('Asia/Kolkata')->format('H:i:s') }}" data-range-buffer-on-checkin="{{ $teamShift->shift->range_buffer_on_checkin ?? '00:00:00'}}" data-range-buffer-on-checkout="{{$teamShift->shift->range_buffer_on_checkout ?? '00:00:00'}}" data-buffer-checkin="{{ $teamShift->shift->buffer_on_checkin }}" data-buffer-checkout="{{ $teamShift->shift->buffer_on_checkout }}" value="1"></td>
                        </tr>
                              </tbody>
                              @endif
                               @endforeach
                            </table>
                          @endforeach
               
            </fieldset>
            <div class="d-flex justify-content-end align-items-center">
                <button type="submit" name="status" value="0" class="btn btn-primary ml-3">
                         <i class="icon-paperplane ml-2"></i>Publish Schedule</button>
                <a class="btn btn-default btn-close btn btn-primary ml-3" href="#">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>
                <!-- <a class="btn btn-default btn-close btn btn-primary ml-3" href="">Add New Member</a> -->
                <button type="submit" name="status" value="1" class="btn btn-primary ml-3">
                         <i class="icon-paperplane ml-2"></i>Save as Draft</button>
            </div>
        </form>
    </div>
</div>
<!-- /form validation -->
@endsection

@section('js')

<script type="text/javascript">

$(document).ready(function () {
  $("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 rangeCheckin = clickedCheckbox.attr("data-range-buffer-on-checkin") || "00:00:00"; 
    let rangeCheckout = clickedCheckbox.attr("data-range-buffer-on-checkout") || "00:00:00"; 
    // Ignore rangeCheckin and rangeCheckout as per new rule
    // Only apply buffer checkin and checkout
    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 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);
        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) {
          if (!time1 || !time2) return "00:00:00"; // safeguard
        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) {
          if (!time1 || !time2) return "00:00:00"; // safeguard
        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;
    }


    $("#from_date").datepicker({
        // format: "yyyy-mm-dd",
        autoclose: true,
        startDate: '-0m'
        
    })
    .on('changeDate', function (selected) {
      console.info("setting the date here");
      let minDate = new Date(selected.date.valueOf());
      $('#to_date').datepicker('setDate', null);
      $('#to_date').datepicker('setStartDate', minDate);
   });

    $("#to_date").datepicker({
        // format: "yyyy-mm-dd",
        autoclose: true
    })
})

  $(document).ready(function() {
      $("#default_checkbox").click(function() {
        $("#from_date").toggle();
        $("#to_date").toggle();
      });

  });

</script>
@endsection