{{ View::make('layout.header') }}
<style>
.date-boxes {
    display: flex;
    white-space:nowrap;
    
}

.roster-select-schedule {
    width: 140px;
    background: white;
    color: grey;
    border: 2px solid #cccccc; /* Define the border with slight grey color */
}

.dropright {
    font-size:8px;
}
.table th {
    padding:15px;
}

    .spinner-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
      z-index: 9999; /* Ensure it's above other content */
      transition:all 0.5s;
    }


.table td {
    padding:5px;
    padding-right:10px;
}

.chipku {
   flex: 0 0 75%;
    max-width: 75%;
    position: fixed;
    top: 0;
    float: left;
}
.dateHead {
    position:sticky;
    top:0;
}
.shouldOverflow {
    margin-left:0px;
    display: flex;
    flex-wrap: nowrap;
}

.dates-row th {
    position: sticky;
    top: 0;
    background-color: #fff; /* Background color of the sticky header */
    z-index: 10; /* Ensure the header is above other content */
}
/*.date-box {*/
/*    width: 140px;*/
/*    margin-right:  15px;*/
/*    height: 30px;*/
/*    border: 1px solid #ccc;*/
/*    text-align: center;*/
/*    line-height: 24px;*/
/*    background-color: white;*/
/*    transition: all 0.2s;*/
/*    font-style:italic;*/
/*    font-size:12px;*/
/*    font-weight:500;*/
/*    padding:3px;*/
/*    border-radius:6px;*/
/*}*/
.date-box {
       /*margin-right:  15px;*/
}

.roasterColumn {
    padding-right: 80px !important;
}

.date-box {
    overflow: hidden;
    font-size: 12px;
    text-align: center; /* Center text */
    white-space: nowrap; /* Prevent wrapping */
    text-overflow: ellipsis; /* Add ellipsis for overflow */
    width: 140px; /* Define the width as needed */
}

.schedule-option {
    display: inline-block;
    width: 30px; /* Set the width to make it square */
    height: 30px; /* Set the height to make it square */
    line-height: 30px; /* Center content vertically */
    text-align: center; /* Center content horizontally */
    border: 1px solid #ccc; /* Add border for visual separation */
    margin-left: 5px; /* Add some spacing between the options */
    cursor: pointer; /* Change cursor to pointer on hover */
}
.selected {
    border:none;
}
</style>


<style>
    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    
    /* Tooltip text */
    .tooltip::after {
        content: attr(aria-label);
        visibility: hidden;
        width: auto;
        background-color: #000;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    /* Show the tooltip text when hovering over the tooltip container */
    .tooltip:hover::after {
        visibility: visible;
        opacity: 1;
    }
    thead {
    position: sticky;
    top: 0;
    background-color: #fff; /* Background color of the sticky header */
    z-index: 2; /* Ensure the header is above other content */
}
.dates,thead{
    position:sticky;
    top:60px;
    height:40px;
    background:red;
    z-index:10;
}

</style>
<style>
[data-tippy]{position:relative}[data-tippy]:after,[data-tippy]:before{position:absolute;display:block;opacity:0;font-family:sans-serif;-webkit-transform:translate(-50%);transform:translate(-50%);-webkit-transform-origin:top;transform-origin:top;top:100%;left:50%;pointer-events:none}[data-tippy]:before{content:attr(data-tippy);color:#fff;font-size:14px;background-color:#000;z-index:1;padding:3px 6px;border-radius:3px;white-space:nowrap;margin-top:10px;font-weight:400}[data-tippy]:after{content:'';border:5px solid transparent;border-bottom-color:#000}[data-tippy]:hover:after,[data-tippy]:hover:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos]:after,[data-tippy][data-tippy-pos]:before{top:auto;left:auto;margin-top:auto;-webkit-transform:none;transform:none}[data-tippy][data-tippy-pos]:after{border-bottom-color:transparent}[data-tippy][data-tippy-pos=down]:after,[data-tippy][data-tippy-pos=down]:before,[data-tippy][data-tippy-pos=up]:after,[data-tippy][data-tippy-pos=up]:before{left:50%}[data-tippy][data-tippy-pos=up]:after,[data-tippy][data-tippy-pos=up]:before{bottom:100%;-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos=up]:before{margin-bottom:10px}[data-tippy][data-tippy-pos=up]:after{border-top-color:#000;border-bottom-color:transparent}[data-tippy][data-tippy-pos=down]:after,[data-tippy][data-tippy-pos=down]:before{top:100%;-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos=down]:before{margin-top:10px}[data-tippy][data-tippy-pos=down]:after{border-bottom-color:#000;border-top-color:transparent}[data-tippy][data-tippy-pos=left]:after,[data-tippy][data-tippy-pos=left]:before,[data-tippy][data-tippy-pos=right]:after,[data-tippy][data-tippy-pos=right]:before{top:50%}[data-tippy][data-tippy-pos=left]:after,[data-tippy][data-tippy-pos=left]:before{right:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-tippy][data-tippy-pos=left]:before{margin-right:10px}[data-tippy][data-tippy-pos=left]:after{border-left-color:#000}[data-tippy][data-tippy-pos=right]:after,[data-tippy][data-tippy-pos=right]:before{left:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-tippy][data-tippy-pos=right]:before{margin-left:10px}[data-tippy][data-tippy-pos=right]:after{border-right-color:#000}[data-tippy]:hover:after,[data-tippy]:hover:before{opacity:1}[data-tippy][data-tippy-animate]:after,[data-tippy][data-tippy-animate]:before{transition:all .15s ease-out;transition-delay:0s}[data-tippy][data-tippy-animate]:hover:after,[data-tippy][data-tippy-animate]:hover:before{transition-delay:.15s}[data-tippy][data-tippy-animate=slide]:after,[data-tippy][data-tippy-animate=slide]:before{-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-tippy][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-animate=slide]:hover:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:after,[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:before{-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px)}[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:after,[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:before{-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-pos=down][data-tippy-animate=slide]:hover:before,[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-pos=up][data-tippy-animate=slide]:hover:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:after,[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:before{-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:after,[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:before{-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-pos=left][data-tippy-animate=slide]:hover:before,[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:hover:after,[data-tippy][data-tippy-pos=right][data-tippy-animate=slide]:hover:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-tippy][data-tippy-animate=bubble]:after,[data-tippy][data-tippy-animate=bubble]:before{opacity:1;visibility:hidden}[data-tippy][data-tippy-animate=bubble]:hover:after,[data-tippy][data-tippy-animate=bubble]:hover:before{visibility:visible}[data-tippy][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 50% 0);clip-path:circle(10% at 50% 0)}[data-tippy][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-pos=up][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 50% 100%);clip-path:circle(10% at 50% 100%)}[data-tippy][data-tippy-pos=up][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-pos=down][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 50% 0);clip-path:circle(10% at 50% 0)}[data-tippy][data-tippy-pos=down][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 100% 50%);clip-path:circle(10% at 100% 50%)}[data-tippy][data-tippy-pos=left][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-pos=right][data-tippy-animate=bubble]:before{-webkit-clip-path:circle(10% at 0 50%);clip-path:circle(10% at 0 50%)}[data-tippy][data-tippy-pos=right][data-tippy-animate=bubble]:hover:before{-webkit-clip-path:circle(100% at 50%);clip-path:circle(100% at 50%)}[data-tippy][data-tippy-visible]:after,[data-tippy][data-tippy-visible]:before{opacity:1;visibility:visible}[data-tippy][data-tippy-size=tiny]:before{font-size:10px}[data-tippy][data-tippy-size=small]:before{font-size:12px}[data-tippy][data-tippy-size=large]:before{font-size:16px}[data-tippy][data-tippy-size=jumbo]:before{font-size:20px}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/fontawesome.min.css" integrity="sha512-d0olNN35C6VLiulAobxYHZiXJmq+vl+BGIgAxQtD5+kqudro/xNMvv2yIHAciGHpExsIbKX3iLg+0B6d0k4+ZA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!--<div class="spinner-container text-white" id="spinnerContainer">-->
  <!-- Bootstrap Spinner -->
<!--  <div class="spinner-border" role="status">-->
<!--    <span class="sr-only">Loading...</span>-->
<!--  </div>-->
<!--</div>-->


<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">HR </li>
                                    <li class="breadcrumb-item active"><a href="{{ route('e-claim.setup') }}">Setup</a></li>
                                    <li class="breadcrumb-item active">
                                        <a href="{{ route('e-claim.cutoff-config') }}">Cutoff Config</a>
                                    </li>
                                </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<div class="content-body">
    <section id="dashboard-ecommerce">
        <div class="row match-height">
            <div class="card" style="width: 100%;">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <h4 class="card-title">Cutoff date</h4>
                    </div>
                </div>
                <div class="card-body">
                    <div class="col-md-3">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="enable-cutoff" @if($isEnabled) checked @endif>
                            <label class="custom-control-label" for="enable-cutoff">Enable custom cutoff</label>
                        </div>
                        <select class="form-control mt-2" id="cutoff-date-input" name="cutoff_date" @if(!$isEnabled) disabled @endif>
                            <option value="">Select cutoff date</option>
                            @for ($i = 1; $i <= 31; $i++)
                                <option value="{{ $i }}" @if($cutoffDateValue == $i) selected @endif>{{ $i }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-md-3">
                        <hr/>
                        <button type="button" class="btn btn-primary" onclick="saveSettings()">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>


{{ View::make('layout.footer') }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/fontawesome.min.js" integrity="sha512-C8qHv0HOaf4yoA7ISuuCTrsPX8qjolYTZyoFRKNA9dFKnxgzIHnYTOJhXQIt6zwpIFzCrRzUBuVgtC4e5K1nhA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    document.getElementById('enable-cutoff').addEventListener('change', function() {
        var dropdown = document.getElementById('cutoff-date-input');
        dropdown.disabled = !this.checked;
        if (!this.checked) {
            dropdown.selectedIndex = 0;
        }
    });
        window.csrfToken = '{{ csrf_token() }}';

    function saveSettings() {
        var enableCutoff = document.getElementById('enable-cutoff').checked ? 1 : 0; // Convert boolean to 0 or 1
        var cutoffDate = document.getElementById('cutoff-date-input').value;
        var csrfToken = window.csrfToken; // Assuming csrfToken is set in your Blade template
        console.log(enableCutoff);
        // AJAX request
        $.ajax({
            url: '{{ route("e-claim.save-cutoff-config") }}',
            type: 'POST',
            dataType: 'json',
            data: {
                enable_cutoff: enableCutoff,
                cutoff_date: cutoffDate,
                _token: csrfToken // Include CSRF token in the request data
            },
            success: function(response) {
                toastr.success(response.message); // Show success message
            },
            error: function(xhr, status, error) {
                toastr.error("Error occurred while saving settings. Please try again"); // Show success message
            }
        });
    }
    
</script>