@extends('layouts.app')
@section('content')


<link href="{{ dsAsset('js/lib/tui.calendar/tui-calendar/dist/tui-calendar.css') }}" rel="stylesheet" />
<link href="{{ dsAsset('js/lib/tui.calendar/tui-time-picker/dist/tui-time-picker.min.css') }}" rel="stylesheet" />
<link href="{{ dsAsset('js/lib/tui.calendar/tui-date-picker/dist/tui-date-picker.min.css') }}" rel="stylesheet" />

<script src="{{ dsAsset('js/lib/tui.calendar/tui-code-snippet/dist/tui-code-snippet.min.js') }}"></script>
<script src="{{ dsAsset('js/lib/tui.calendar/tui-time-picker/dist/tui-time-picker.min.js') }}"></script>
<script src="{{ dsAsset('js/lib/tui.calendar/tui-date-picker/dist/tui-date-picker.min.js') }}"></script>
<script src="{{ dsAsset('js/lib/tui.calendar/tui-calendar/dist/tui-calendar.min.js') }}"></script>
<script src="{{ dsAsset('js/lib/tui.calendar/tui-calendar-init.js') }}"></script>

<script src="{{ dsAsset('js/lib/country-list.js') }}"></script>


<link href="{{ dsAsset('css/custom/employee/employee.css')}}" rel="stylesheet" />
<script src="{{ dsAsset('js/custom/employee/shifts.js') }}"></script>

<div class="page-inner">
    <!--Modal-->
    <div class="modal fade tui-calender-modal" id="frmAddCalendarModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog tui-calendar-modal-content" role="document">
            <div class="modal-content">
                <form class="form-horizontal" id="inputFormOffDay" novalidate="novalidate">
                    <input type="hidden" name="id" id="calId" />
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <span class="fw-mediumbold">
                                {{translate('Add or update off day')}}
                            </span>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="form-group control-group form-inline">
                            <div class="tui-full-calendar-popup-section-item w100">
                                <span class="tui-full-calendar-icon tui-full-calendar-ic-title"></span>
                                <input id="holiday-title" name="title" class="tui-full-calendar-content w80" placeholder="{{translate('Subject')}}" value="" required>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group control-group form-inline">
                                    <div class="tui-full-calendar-popup-section-item w100">
                                        <span class="tui-full-calendar-icon tui-full-calendar-ic-date"></span>
                                        <input id="start-date" name="start_date" class="startDate tui-full-calendar-content w80" placeholder="{{translate('Start date')}}" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group control-group form-inline">
                                    <div class="tui-full-calendar-popup-section-item w100">
                                        <span class="tui-full-calendar-icon tui-full-calendar-ic-date"></span>
                                        <input id="end-date" name="end_date" class="endDate tui-full-calendar-content w80" placeholder="{{translate('End date')}}" required>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="btn-calendar-save" class="btn btn-success btn-sm">{{translate('Save Change')}}</button>

                    </div>
                </form>

            </div>
        </div>
    </div>

    <!-- details view modal -->
    <div class="modal fade tui-calender-modal" id="frmViewCalendarModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog tui-calendar-modal-content" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="divScheduleDetails"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btn-calendar-edit" class="btn btn-warning btn-sm float-left">{{translate('Edit')}}</button>
                    <button type="button" id="btn-calendar-delete" class="btn btn-danger btn-sm">{{translate('Delete')}}</button>

                </div>
            </div>
        </div>
    </div>
    <!-- end details view modal -->

    <div class="modal fade" id="frmModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form class="form-horizontal" id="inputForm" enctype="multipart/form-data">

                    <div class="modal-header">
                        <h5 class="modal-title">
                            <span class="fw-mediumbold">
                                {{translate('Shifts Info')}}
                            </span>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body mt-2">
                        <nav>
                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                <a class="nav-link active" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="true"><i class="far fa-user"></i>Shift</a>
                            </div>
                        </nav>
                        <div class="tab-content" id="nav-tabContent">
                            <input type="hidden" name="id" id="id" />


                            <!-- Shift -->
                            <div class="tab-pane fade show active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                                <div class="row">
                                    <!--                                     <div class="col-md-4 pl-4">
                                        <div class="form-group control-group form-inline">
                                            <img id="empimagepreview" width="100%" />
                                            <span class="float-left w-100">{{translate('Image')}} 360x260</span>
                                            <input class="mt-1" type="file" id="image_url" name="image_url" accept="image/png, image/jpeg">
                                        </div>
                                    </div> -->
                                    <div class="col-md-12">
                                        <div class="form-group control-group form-inline">
                                            <label class="indented-label">Shift Name <span class="required-label">*</span>
                                            </label>
                                            <div class="col-md-12 controls">
                                                <input type="text" id="shift_name" name="shift_name" required placeholder="Shift Name" class="form-control input-full" data-validation-required-message="Shift Name is required" />
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div class="form-group control-group form-inline">
                                            <label class="indented-label">Shift Start Time<span class="required-label">*</span>
                                            </label>
                                            <div class="col-md-12 controls">
                                                <input type="time" id="shift_start_time" name="shift_start_time" placeholder="Shift Start Time" class="form-control input-full" />
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div class="form-group control-group form-inline">
                                            <label class="indented-label">Shift End Time<span class="required-label">*</span>
                                            </label>
                                            <div class="col-md-12 controls">
                                                <input type="time" id="shift_end_time" name="shift_end_time" placeholder="Shift End Time" class="form-control input-full" />
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                        <div class="form-group control-group form-inline">
                                            <label class="indented-label">Legend Name<span class="required-label">*</span>
                                            </label>
                                            <div class="col-md-12 controls">
                                                <input type="text" id="legend_name" name="legend_name" placeholder="Legend Name" class="form-control input-full" />
                                                <span class="help-block"></span>
                                            </div>
                                        </div>

                                        <div class="form-group control-group form-inline">
                                            <label class="indented-label">Color Code<span class="required-label">*</span>
                                            </label>
                                            <div class="col-md-12 controls">
                                                <input type="color" id="color_code" name="color_code" placeholder="Color Code" class="form-control input-full" style="height: 50px !important;" />
                                                <span class="help-block"></span>
                                            </div>
                                        </div>

                                    <!--    <div class="form-group form-inline">

                                            <label class="col-md-3 col-form-label">{{translate('Status')}}</label>

                                            <div class="col-md-9">

                                                <div class="form-check">

                                                    <label class="form-radio-label">

                                                        <input id="statusYes" type="radio" name="status" class="form-radio-input" value="1" checked="checked" />

                                                        <span class="form-radio-sign pl-1"> {{translate('Active')}}</span>

                                                    </label>

                                                    <label class="form-radio-label">

                                                        <input id="statusNo" type="radio" class="form-radio-input" name="status" value="0" />

                                                        <span class="form-radio-sign pl-1"> {{translate('Inactive')}}</span>

                                                    </label>

                                                </div>

                                            </div>

                                        </div> -->
                                    </div>
                                </div>


                                <div class="row d-none">
                                    <div class="col-md-6">
                                        <div class="form-group form-inline control-group">
                                            <label class="col-md-12">
                                                {{translate('Phone No')}}
                                            </label>
                                            <div class="col-md-12 controls">
                                                <div class="input-group">
                                                    <input type="text" id="contact_no" maxlength="20" placeholder="{{translate('Phone No')}}" class="form-control w100" />
                                                </div>
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group control-group form-inline ">
                                            <label class="col-md-12">
                                                {{translate('Email Address')}}
                                                <span class="required-label">*</span>
                                            </label>
                                            <div class="col-md-12 controls">
                                                <input type="email" id="email_address" name="email_address" placeholder="{{translate('Email Address')}}" class="form-control input-full" data-validation-required-message="Email is required" />
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--                                <div class="form-group control-group form-inline">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <label class="col-md-12">
                                                {{translate('Department')}}
                                            </label>
                                            <div class="col-md-12 controls">
                                                <select id="hrm_department_id" name="hrm_department_id" class="form-control input-full"></select>
                                                <span class=" help-block"></span>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="row">
                                            <label class="col-md-12">
                                                {{translate('Designation')}}
                                            </label>
                                            <div class="col-md-12 controls">
                                                <select id="hrm_designation_id" name="hrm_designation_id" class="form-control input-full"></select>
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group control-group form-inline">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <label class="col-md-12">
                                                {{translate('Salary')}}
                                            </label>
                                            <div class="col-md-12 controls">
                                                <input type="number" name="salary" id="salary" placeholder="{{translate('Monthly Salary')}}" class="form-control input-full" value="0.00" />
                                                <span class=" help-block"></span>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="row">
                                            <label class="col-md-12">
                                                {{translate('Commission per service')}} %
                                            </label>
                                            <div class="col-md-12 controls">
                                                <input type="number" name="commission" id="commission" placeholder="{{translate('Commission per service')}}" class="form-control input-full" value="0.00" />
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group control-group form-inline">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <label class="col-md-12">
                                                {{translate('Commission based on')}}
                                            </label>
                                            <div class="col-md-12 controls">
                                                <select id="pay_commission_based_on" name="pay_commission_based_on" class="form-control input-full">
                                                    <option value="1">Salary</option>
                                                    <option value="2">Service Amount</option>
                                                </select>
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="row">
                                            <label class="col-md-12">
                                                {{translate('Target service amount')}} 
                                            </label>
                                            <div class="col-md-12 controls">
                                                <input type="number" name="target_service_amount" id="target_service_amount" placeholder="{{translate('service')}}" class="form-control input-full" value="0.00" readonly="true" />
                                                <span class="help-block"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div> -->

                                <div class="form-group control-group form-inline d-none">
                                    <label class="col-md-12">
                                        {{translate('System User')}}
                                    </label>
                                    <div class="col-md-12 controls">
                                        <select id="user_id" name="user_id" class="form-control input-full"></select>
                                        <span class="help-block"></span>
                                    </div>
                                </div>

                                <!-- <div class="form-group control-group form-inline ">
                                    <label class="col-md-12">
                                        {{translate('Gender')}} <span class="required-label">*</span>
                                    </label>
                                    <div class="col-md-12 controls">
                                        <select id="gender" name="gender" class="form-control input-full">
                                            <option value="1">Male</option>
                                            <option value="2">Female</option>
                                            <option value="3">Other</option>
                                        </select>
                                        <span class="help-block"></span>
                                    </div>
                                </div> -->

                                <!--                                 <div class="form-group control-group form-inline ">
                                    <label class="col-md-12">
                                        {{translate('Date Of Birth')}}
                                    </label>
                                    <div class="col-md-12 controls">
                                        <input type="text" id="dob" name="dob" placeholder="yyyy-mm-dd" class="datePicker form-control input-full" />
                                        <span class="help-block"></span>
                                    </div>
                                </div>

                                <div class="form-group control-group form-inline ">
                                    <label class="col-md-12">
                                        {{translate('Specialist')}}
                                    </label>
                                    <div class="col-md-12 controls">
                                        <textarea type="text" id="specialist" name="specialist" placeholder="{{translate('Specialist')}}" class="form-control input-full"></textarea>
                                        <span class="help-block"></span>
                                    </div>
                                </div> -->

                                <!--                                 <div class="form-group control-group form-inline ">
                                    <label class="col-md-12">
                                        {{translate('Present Address')}}
                                    </label>
                                    <div class="col-md-12 controls">
                                        <textarea type="text" id="present_address" name="present_address" placeholder="{{translate('Present Address')}}" class="form-control input-full"></textarea>
                                        <span class="help-block"></span>
                                    </div>
                                </div>

                                <div class="form-group control-group form-inline ">
                                    <label class="col-md-12">
                                        {{translate('Permanent Address')}}
                                    </label>
                                    <div class="col-md-12 controls">
                                        <textarea type="text" id="permanent_address" name="permanent_address" placeholder="{{translate('Permanent Address')}}" class="form-control input-full"></textarea>
                                        <span class="help-block"></span>
                                    </div>
                                </div> -->

                                <!-- <div class="form-group control-group form-inline ">
                                    <label class="col-md-12">
                                        {{translate('Note')}}
                                    </label>
                                    <div class="col-md-12 controls">
                                        <textarea type="text" id="note" name="note" placeholder="{{translate('Note')}}" class="form-control input-full"></textarea>
                                        <span class="help-block"></span>
                                    </div>
                                </div> -->

                                <!--                                 <div class="form-group control-group form-inline ">
                                    <label class="col-md-12">
                                        {{translate('ID Card')}}
                                    </label>
                                    <div class="col-md-12 controls">
                                        <input type="file" id="id_card" name="id_card" accept="image/png, image/jpeg">
                                        <div class="float-left w-100">
                                            <img id="empidcardimageview" class="mw250px" />
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group control-group form-inline ">
                                    <label class="col-md-12">
                                        {{translate('Passport')}}
                                    </label>
                                    <div class="col-md-12 controls">
                                        <input type="file" id="passport" name="passport" accept="image/png, image/jpeg">
                                        <div class="float-left w-100">
                                            <img id="emppassportimageview" class="mw250px" />
                                        </div>
                                    </div>
                                </div> -->

                                <div class="form-group control-group form-inline ">
                                    <label class="col-md-12 d-none">
                                        {{translate('Visibility Status')}}
                                        <span class="required-label">*</span>
                                    </label>
                                    <div class="col-md-12 controls">
                                        <select hidden id="status" name="status" class="form-control input-full">
                                            <option value="1">Public</option>
                                            <!--                                             <option value="2">Private</option>
                                            <option value="3">Disable</option>
 -->
                                        </select>
                                        <span class="help-block"></span>
                                    </div>
                                </div>
                            </div>
                            <!-- end profile -->

                            <!-- sc fucntion -->
                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    // Function to autofill time values
                                    function autofillTimes() {
                                        for (var i = 0; i < 7; i++) {
                                            document.querySelector('input[name="business[' + i + '][start_time]"]').value = "08:00";
                                            document.querySelector('input[name="business[' + i + '][end_time]"]').value = "19:00";
                                            document.querySelector('input[name="business[' + i + '][break_start_time]"]').value = "12:00";
                                            document.querySelector('input[name="business[' + i + '][break_end_time]"]').value = "13:00";
                                        }
                                    }

                                    // Attach autofill function to the button click event
                                    document.getElementById('autofillButton').addEventListener('click', function(event) {
                                        // Prevent the default form submission behavior
                                        event.preventDefault();
                                        // Call the autofill function
                                        autofillTimes();
                                    });

                                    // Prevent form submission on Enter key press
                                    document.getElementById('yourFormId').addEventListener('submit', function(event) {
                                        event.preventDefault();
                                    });
                                });
                            </script>
                            <!-- sc fucntion end -->
                            <!-- offday -->
                            <div class="tab-pane fade" id="nav-offday" role="tabpanel" aria-labelledby="nav-offday-tab">
                                <div class="row">
                                    <div class="col-md-12 mt-2">
                                        <div id="menu">
                                            <span id="menu-navi">
                                                <button type="button" class="btn btn-default2 btn-tui-calendar-default2 btn-sm move-today btn-round btn-move-calendar" data-action="move-today">{{translate('Today')}}</button>
                                                <button type="button" class="btn btn-default2 btn-tui-calendar-default2 btn-sm move-day btn-round btn-move-calendar" data-action="move-prev">
                                                    <i class="calendar-icon fas fa-chevron-left" data-action="move-prev"></i>
                                                </button>
                                                <button type="button" class="btn btn-default2 btn-tui-calendar-default2 btn-sm move-day btn-round btn-move-calendar" data-action="move-next">
                                                    <i class="calendar-icon fas fa-chevron-right" data-action="move-next"></i>
                                                </button>
                                            </span>
                                            <span id="renderRange" class="render-range"></span>
                                        </div>
                                        <div class="mt-1" id="calendar"></div>

                                    </div>
                                </div>
                            </div>
                            <!-- end offday -->

                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">{{translate('Close')}}</button>
                        <button type="submit" id="btnSaveShift" class="btn btn-success btn-sm">{{translate('Save Change')}}</button>

                    </div>
                </form>

            </div>
        </div>
    </div>


    <!--datatable-->
    <div class="row">
        <div class="col-md-12">
            <div class="main-card card">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <h4 class="card-title">Shifts Info</h4>
                        <button id="btnAdd" class="btn btn-primary btn-sm btn-round ml-auto">
                            <i class="fa fa-plus mr-2"></i>Add Shift</button>
                    </div>
                </div>
                <div class="card-body">
                    <table id="tableElement" class="table table-bordered w100"></table>
                </div>
            </div>
        </div>
    </div>
</div>




@endsection