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

<link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/pickers/pickr-themes.css') }}">
<style>
    .alert-error {
        background-color: #ea5354 !important;
        color: #fff !important;
        padding: 9px;
    }

    .alert-success {
        background-color: #29c76f !important;
        color: #fff !important;
        padding: 9px;
    }

    .alert-success .close,
    .alert-error .close {
        color: #fff !important;
        font-size: 19px;
    }

    .close:hover {
        color: #fff !important;
        font-size: 19px;
    }

    .nav.nav-left .nav-item .nav-link {
        box-shadow: 0 5px 7px -7px #0f5e3059;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .colorpicker-1 {
        color: #fff;
    }
</style>
<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">
                        <h2 class="content-header-title float-left mb-0">E-Attendance</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">HR
                                </li>
                                <li class="breadcrumb-item"><a href="{{ route('setupHr') }}">Setup</a>
                                </li>
                                <li class="breadcrumb-item active"><a href="#">Attendance Control</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <!-- account setting page -->
            <section id="page-account-settings">
                <div class="row">
                    <!-- left menu section -->
                    <div class="col-md-3 mb-2 mb-md-0">
                        <ul class="nav nav-pills flex-column nav-left">
                            <li class="nav-item">
                                <a class="nav-link active" id="account-pill-social" data-toggle="pill"
                                    href="#approver-settings" aria-expanded="false">
                                    <span class="font-weight-bold">OT</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" id="account-pill-social" data-toggle="pill"
                                    href="#non-active-date-confirmed-setting" aria-expanded="false">
                                    <span class="font-weight-bold">Setting</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!--/ left menu section -->

                    <!-- right content section -->
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-body">
                                <div class="tab-content">
                                    <!-- general tab -->

                                    <div class="tab-pane active" id="approver-settings" role="tabpanel"
                                        aria-labelledby="account-pill-notifications" aria-expanded="false">
                                        <div class="row">
                                            <div class="col-12 col-sm-12">
                                                <h4 class="card-title">OT Setting</h4>
                                            </div>
                                            <div class="content-body">
                                                <!-- Schedule Starts -->
                                                <section id="multiple-column-form">
                                                    <form action="{{ route('updateGlobalRoundSys') }}" method="POST">
                                                        @csrf
                                                        <div class="row" style="margin:0px;">
                                                            <div class="card col-md-12" style="">
                                                                <div class="card-body">
                                                                    <div class="card" style="border: 0px;">
                                                                        <div class="card-body" style="padding:0px; ">
                                                                            <div class="col-md-12" style="padding:0px;">
                                                                                <div class="table-responsive">
                                                                                    <table
                                                                                        class="table table-bordered  my-leave-summary-entitle"
                                                                                        id="example11"
                                                                                        style="font-size:12px; table-layout:fixed;">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <th colspan="2"
                                                                                                    style="text-align: left;text-transform: capitalize;">
                                                                                                    Type</th>
                                                                                                <th
                                                                                                    style="text-align:center;text-transform: capitalize;">
                                                                                                    Work Hour</th>
                                                                                                <th
                                                                                                    style="text-align:center;text-transform: capitalize;">
                                                                                                    Holiday Hour</th>
                                                                                                <th
                                                                                                    style="text-align:center;text-transform: capitalize;">
                                                                                                    Restday Hour</th>
                                                                                                <th
                                                                                                    style="text-align:center;text-transform: capitalize;">
                                                                                                    OT</th>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                        <tbody>
                                                                                            <tr style="height:50px;">
                                                                                                <td colspan="2">Round
                                                                                                    To Nearest Minutes
                                                                                                </td>
                                                                                                <td>
                                                                                                    <select
                                                                                                        name="workday_round_min"
                                                                                                        class="form-control daytype">
                                                                                                        <option
                                                                                                            @if (isset($workday_round_min) && $workday_round_min->value == 0) selected @endif
                                                                                                            value="0">
                                                                                                            0</option>
                                                                                                        <option
                                                                                                            @if (isset($workday_round_min) && $workday_round_min->value == 5) selected @endif
                                                                                                            value="5">
                                                                                                            5</option>
                                                                                                        <option
                                                                                                            @if (isset($workday_round_min) && $workday_round_min->value == 10) selected @endif
                                                                                                            value="10">
                                                                                                            10</option>
                                                                                                        <option
                                                                                                            @if (isset($workday_round_min) && $workday_round_min->value == 30) selected @endif
                                                                                                            value="30">
                                                                                                            30</option>
                                                                                                    </select>
                                                                                                </td>
                                                                                                <td>
                                                                                                    <select
                                                                                                        name="holiday_round_min"
                                                                                                        class="form-control daytype">
                                                                                                        <option
                                                                                                            @if (isset($holiday_round_min) && $holiday_round_min->value == 0) selected @endif
                                                                                                            value="0">
                                                                                                            0</option>
                                                                                                        <option
                                                                                                            @if (isset($holiday_round_min) && $holiday_round_min->value == 5) selected @endif
                                                                                                            value="5">
                                                                                                            5</option>
                                                                                                        <option
                                                                                                            @if (isset($holiday_round_min) && $holiday_round_min->value == 10) selected @endif
                                                                                                            value="10">
                                                                                                            10</option>
                                                                                                        <option
                                                                                                            @if (isset($holiday_round_min) && $holiday_round_min->value == 30) selected @endif
                                                                                                            value="30">
                                                                                                            30</option>
                                                                                                    </select>
                                                                                                </td>

                                                                                                <td>
                                                                                                    <select
                                                                                                        name="restday_round_min"
                                                                                                        class="form-control daytype">
                                                                                                        <option
                                                                                                            @if (isset($restday_round_min) && $restday_round_min->value == 0) selected @endif
                                                                                                            value="0">
                                                                                                            0</option>
                                                                                                        <option
                                                                                                            @if (isset($restday_round_min) && $restday_round_min->value == 5) selected @endif
                                                                                                            value="5">
                                                                                                            5</option>
                                                                                                        <option
                                                                                                            @if (isset($restday_round_min) && $restday_round_min->value == 10) selected @endif
                                                                                                            value="10">
                                                                                                            10</option>
                                                                                                        <option
                                                                                                            @if (isset($restday_round_min) && $restday_round_min->value == 30) selected @endif
                                                                                                            value="30">
                                                                                                            30</option>
                                                                                                    </select>
                                                                                                </td>
                                                                                                <td>
                                                                                                    <select
                                                                                                        name="ot_round_min"
                                                                                                        class="form-control daytype">
                                                                                                        <option
                                                                                                            @if (isset($ot_round_min) && $ot_round_min->value == 0) selected @endif
                                                                                                            value="0">
                                                                                                            0</option>
                                                                                                        <option
                                                                                                            @if (isset($ot_round_min) && $ot_round_min->value == 5) selected @endif
                                                                                                            value="5">
                                                                                                            5</option>
                                                                                                        <option
                                                                                                            @if (isset($ot_round_min) && $ot_round_min->value == 10) selected @endif
                                                                                                            value="10">
                                                                                                            10</option>
                                                                                                        <option
                                                                                                            @if (isset($ot_round_min) && $ot_round_min->value == 30) selected @endif
                                                                                                            value="30">
                                                                                                            30</option>
                                                                                                    </select>
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr style="height:50px;">
                                                                                                <td colspan="2">
                                                                                                    Rounding</td>
                                                                                                <td>
                                                                                                    <select
                                                                                                        name="workday_round_type"
                                                                                                        class="form-control daytype">
                                                                                                        <option
                                                                                                            @if (isset($workday_round_type) && $workday_round_type->value == 'up') selected @endif
                                                                                                            value="up">
                                                                                                            UP</option>
                                                                                                        <option
                                                                                                            @if (isset($workday_round_type) && $workday_round_type->value == 'down') selected @endif
                                                                                                            value="down">
                                                                                                            Down
                                                                                                        </option>
                                                                                                    </select>
                                                                                                </td>
                                                                                                <td>
                                                                                                    <select
                                                                                                        name="holiday_round_type"
                                                                                                        class="form-control daytype">
                                                                                                        <option
                                                                                                            @if (isset($holiday_round_type) && $holiday_round_type->value == 'up') selected @endif
                                                                                                            value="up">
                                                                                                            UP</option>
                                                                                                        <option
                                                                                                            @if (isset($holiday_round_type) && $holiday_round_type->value == 'down') selected @endif
                                                                                                            value="down">
                                                                                                            Down
                                                                                                        </option>
                                                                                                    </select>
                                                                                                </td>
                                                                                                <td>
                                                                                                    <select
                                                                                                        name="restday_round_type"
                                                                                                        class="form-control daytype">
                                                                                                        <option
                                                                                                            @if (isset($restday_round_type) && $restday_round_type->value == 'up') selected @endif
                                                                                                            value="up">
                                                                                                            UP</option>
                                                                                                        <option
                                                                                                            @if (isset($restday_round_type) && $restday_round_type->value == 'down') selected @endif
                                                                                                            value="down">
                                                                                                            Down
                                                                                                        </option>
                                                                                                    </select>
                                                                                                </td>
                                                                                                <td>
                                                                                                    <select
                                                                                                        name="ot_round_type"
                                                                                                        class="form-control daytype">
                                                                                                        <option
                                                                                                            @if (isset($ot_round_type) && $ot_round_type->value == 'up') selected @endif
                                                                                                            value="up">
                                                                                                            UP</option>
                                                                                                        <option
                                                                                                            @if (isset($ot_round_type) && $ot_round_type->value == 'down') selected @endif
                                                                                                            value="down">
                                                                                                            Down
                                                                                                        </option>
                                                                                                    </select>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="text-right">
                                                                        <button
                                                                            class="btn btn-primary waves-effect waves-float waves-light"
                                                                            tabindex="0" type="submit">
                                                                            <span>Update</span>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </section>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane" id="non-active-date-confirmed-setting" role="tabpanel"
                                        aria-labelledby="account-pill-notifications" aria-expanded="false">
                                        <div class="row">
                                            <div class="col-12 col-sm-12">
                                                <h4 class="card-title">Setting</h4>
                                            </div>
                                            <div class="col-12 col-sm-12">
                                                <div class="activity" id="leave">
                                                    <ul class="leave" style="list-style:none; padding:0px;">
                                                        <li class="applyleaveright" style=""><span
                                                                id="active_user_message"></span></li>
                                                        <li class="applyleaveleft">
                                                            <div class="row mt-1" style="align-items: center;">
                                                                <div class="col-md-9 col-sm-9 col-xs-9">OT Request
                                                                </div>
                                                                <div class="col-md-3 col-sm-3 col-xs-3"
                                                                    style="display: flex; justify-content: space-around; align-items: center;">
                                                                    <div class="custom-control custom-control-success custom-checkbox"
                                                                        style="padding: 0px;"><input type="checkbox"
                                                                            class="custom-control-input"
                                                                            id="ot_request" name="ot_request" /><label
                                                                            class="custom-control-label"
                                                                            for="ot_request"></label></div>
                                                                    <input type="button" value="Update"
                                                                        class="btn btn-info"
                                                                        onclick="setSetting('ot_request');" />
                                                                </div>
                                                            </div>                                                            
                                                            <div class="row mt-1" style="align-items: center;">
                                                                <div class="col-md-9 col-sm-9 col-xs-9">Exclude lunch from work hours
                                                                </div>
                                                                <div class="col-md-3 col-sm-3 col-xs-3"
                                                                    style="display: flex; justify-content: space-around; align-items: center;">
                                                                    <div class="custom-control custom-control-success custom-checkbox"
                                                                        style="padding: 0px;"><input type="checkbox"
                                                                            class="custom-control-input"
                                                                            id="exclude_lunch" name="exclude_lunch" /><label
                                                                            class="custom-control-label"
                                                                            for="exclude_lunch"></label></div>
                                                                    <input type="button" value="Update"
                                                                        class="btn btn-info"
                                                                        onclick="setSetting('exclude_lunch');" />
                                                                </div>
                                                            </div>

                                                            <div class="row mt-1" style="align-items: center;">
                                                                <div class="col-md-9 col-sm-9 col-xs-9">Reset Button
                                                                </div>
                                                                <div class="col-md-3 col-sm-3 col-xs-3"
                                                                    style="display: flex; justify-content: space-around; align-items: center;">
                                                                    <div class="custom-control custom-control-success custom-checkbox"
                                                                        style="padding: 0px;"><input type="checkbox"
                                                                            class="custom-control-input"
                                                                            id="setting_reset_button" name="setting_reset_button" /><label
                                                                            class="custom-control-label"
                                                                            for="setting_reset_button"></label></div>
                                                                    <input type="button" value="Update"
                                                                        class="btn btn-info"
                                                                        onclick="setSetting('setting_reset_button');" />
                                                                </div>
                                                            </div>

                                                            <div class="row mt-1" style="align-items: center;">
                                                            <div class="col-md-9 col-sm-9 col-xs-9">Show Resigned Staff
                                                            </div>
                                                            <div class="col-md-3 col-sm-3 col-xs-3"
                                                                style="display: flex; justify-content: space-around; align-items: center;">
                                                                <div class="custom-control custom-control-success custom-checkbox"
                                                                    style="padding: 0px;">
                                                                    <input type="checkbox"
                                                                        class="custom-control-input"
                                                                        id="show_resigned_staff"
                                                                        name="show_resigned_staff" />
                                                                    <label class="custom-control-label"
                                                                        for="show_resigned_staff"></label>
                                                                </div>
                                                                <input type="button" value="Update"
                                                                    class="btn btn-info"
                                                                    onclick="setSetting('show_resigned_staff');" />
                                                            </div>
                                                        </div>
                                        
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ right content section -->
                </div>
            </section>
            <!-- / account setting page -->
        </div>
    </div>
</div>

{{ View::make('layout.footer') }}
<!--  <script src="{{ asset('app-assets/bw/bootstrap-colorpicker.min.js') }}"></script>-->
<script>


$(document).ready(function() {
        // Check if the session variable 'success' exists
        @if (session('success'))
            // If success is true, send a fetch request to the URL
            fetch("{{ route('caching-sheet') }}")
                .then(response => response.json())  // Assuming the response is JSON
                .then(data => {
                    // Handle the respone data
                    console.log('Success:s', data);
                })
                .catch(error => {
                    // Handle errors
                    console.error('Error:', error);
                });
        @endif
    });

    getOtRequestSetting();

function getOtRequestSetting() {
    $.ajax({
        url: '{{ route('getOtRequestSetting') }}',
        type: 'get',
        success: function(data) {
            data.forEach(function(setting) {
                var field = setting.field;
                var value = setting.value;

                // Check if the checkbox exists with the same ID as the field
                var $checkbox = $("#" + field);
                if ($checkbox.length) {
                    // If the value is '1', check the checkbox; otherwise, uncheck it
                    $checkbox.prop("checked", value === '1');
                }
            });
        },
        error: function(xhr) {
            console.log(xhr.responseText);
        }
    });
}


function setSetting(key) {
    var checkbox = $("#" + key); // Assuming the ID of the checkbox corresponds to the key
    var _val = checkbox.is(":checked") ? 1 : 0; // Check if the checkbox is checked

    $.ajax({
        url: '{{ route('setOtRequestSetting') }}',
        type: 'post',
        data: {
            '_token': "{{ csrf_token() }}",
            value: _val,
            key: key
        },
        success: function(e) {
            var message = e ? "<span class='text-success'> Setting updated successfully </span>" :
                "<span class='text-danger'> Error occurred. Please verify the data. </span>";
            $("#active_user_message").html(message);
            
                  // Hit the /caching-sheet URL without redirecting
                  fetch("{{ route('caching-sheet') }}")
                                .then(response => response.json())  // assuming you expect a JSON response
                                .then(data => {
                                    console.log("URL hit successfully", data);
                                })
                                .catch(error => {
                                    console.error("Error hitting the URL", error);
                                });
        },
        error: function(w) {
            $("#active_user_message").html("<span class='text-danger'> Error occurred. Please try again later. </span>");
        }
    });
}

    

</script>