@extends('layouts.default')
@section('content')
<style type="text/css">
  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  }
  a,
table a {
    cursor: pointer;
}
input[type=number] {
  -moz-appearance: textfield;
  color: #000;
}
input {
    height: 38px;
    line-height: 15px;
    /* width: 100%; */
}
table { width: 3em }

.modal-lg {
    width: 1000px;
}
.table th {
    padding: 10px;
}

.schTbHead-Text {
    margin-bottom: 10px !important;
    top: 10px;
    position: relative;
}
.schTbHead-Text h4 {
    margin: 0 0px;
    position: relative;
    color: #0c6dff;
    top: -7px;
}
</style>

@section('new_button')
<!--<a href="{{ url('payrole/timesheet/index') }}" class="btn btn-info btn-Rcircle-iconic waves-effect waves-light"> {{ trans('Back') }}</a>-->
@endsection
<form id="weeks_wise_working_hours" method="POST" action="{{ url('/weeks_wise_working_hours') }}" enctype="multipart/form-data">
<div class="">
  <div class="row"> 
    <div class="col-lg-12 col-md-12 text-center mb-2">
               <div class="schTbHead-Text">
                  <button class="schTbHead-TextBtn" type="button" id="previousWeek">
                      <i class="material-icons">keyboard_arrow_left</i>
                  </button>
                  <h4   class="presentWeek" style="line-height: 50px;"  id="presentWeek" ></h4>
                  
                  <button class="schTbHead-TextBtn pl-0" type="button" id="nextWeek">
                      <i class="material-icons">keyboard_arrow_right</i>
                  </button>

              </div>
              <span id="weekly_timecard_unsaved_msg" style=" display: none;" >
                <strong>You have unsaved changes</strong>
              </span>
              <span id="weekly_timecard_saved_msg" style="display: none;">
                <strong>Changes Saved Successfully</strong>
              </span>
        </div>
    </div>
  <div class="card">
        <div class="card-header">
          {{ Form::selectGroup('employee_id','Select Employee', $customers, null, ['data-live-search'=>'true','required'=>true]) }}
        </div>
        <div class="table-responsive">
          <table class="mytable table table-bordered table-striped" >
            <thead>
              <tr>
                <th>Day/Date </th>
                <th>
                  <label class="label label-default mylabel">Mon</label>
                  <span id="day1" class="mylabel"  name="day1" ></span>
                </th>
                <th>
                  <label class="label label-default mylabel" >Tue</label>
                  <span id="day2" class="mylabel"  name="day2"> </span>
                </th>
                <th>
                  <label class="label label-default mylabel" >Wed</label>
                  <span id="day3" class="mylabel"  name="day3"> </span>
                </th>
                <th>
                  <label class="label label-default mylabel" >Thu</label>
                  <span id="day4" class="mylabel"  name="day4"> </span>
                </th>
                <th>
                  <label class="label label-default mylabel" >Fri</label>
                  <span id="day5" class="mylabel"  name="day5"> </span>
                </th>
                <th>
                  <label class="label label-default mylabel" >Sat</label>
                  <span id="day6" class="mylabel"  name="day6"> </span>
                </th>
                <th>
                  <label class="label label-default mylabel" >Sun</label>
                  <span id="day7" class="mylabel"  name="day7"></span>
                </th>
                <th class="tablemiddel ">
                  Total <br>
                  Hours
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>

                <td class="tablemiddel">REG Hours </td>
                <td> 
                  <input type="number" class="grid  mylabel ver" placeholder="0" min="00" id="monday" max="24" name="monday"  step="any">
                </td>
                <td > 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="tuesday" id="tuesday"  step="any">
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="wednesday" id="wednesday" step="any">
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="thursday" id="thursday" step="any">
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="friday" id="friday" step="any" >
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="saturday" id="saturday" step="any">
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="sunday" id="sunday" step="any">
                </td>
                <td class="text-center tablemiddel editdisable span8" id="total_work_hours"> 
                  00
                </td>
              </tr>
              <tr>

                <td class="tablemiddel"> OT Hours </td>
                <td> 
                  <input type="number" class="grid  mylabel ver" placeholder="0" min="00" max="24" name="monday_ot" id="monday_ot" step="any">
                </td>
                <td > 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="tuesday_ot" id="tuesday_ot" step="any">
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="wednesday_ot" id="wednesday_ot" step="any">
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="thursday_ot" id="thursday_ot" step="any">
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="friday_ot" id="friday_ot" step="any">
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="0" max="24" name="saturday_ot" id="saturday_ot" step="any">
                </td>
                <td> 
                  <input type="number" class="grid  mylabel" placeholder="0" min="00" max="24" name="sunday_ot" id="sunday_ot" step="any">
                </td>
                <td class="text-center tablemiddel editdisable span9" id="total_ot_hours"> 
                  00
                </td>
              </tr>
              <tr class ="span7">
                <td class="tablemiddel"> Total Hours</td>
                <td class="tablemiddel editdisable text-center" id="mon_total"> 00
                </td>
                <td class="tablemiddel editdisable text-center" id="tue_total"> 
                  00
                </td>
                <td class="tablemiddel editdisable text-center" id="wed_total"> 
                  00
                </td>
                <td class="tablemiddel editdisable text-center" id="thu_total"> 
                  00
                </td>
                <td class="tablemiddel editdisable text-center" id="fri_total"> 
                  00
                </td>
                <td class="tablemiddel editdisable text-center" id="sat_total"> 
                  00
                </td>
                <td class="tablemiddel editdisable text-center" id="sun_total"> 
                  00
                </td>
                <td class="tablemiddel editdisable total_hours text-center" id="total_hours" name="total_hours">
                  00
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div >
          <div class="form-groupTextArea form-groupTextArea60  ">
            <textarea class="form-ControlTextArea form-ControlTextArea60"  name="work_report" id="work_report"></textarea>
           <label  class="form-label">Summury Of Weekly Work Report (Please Write atleast Two Sentences On The Project Worked)</label>
           <span class="form-controlBrd"></span>
          </div>
        </div>

        <div class="row p-3">
          <div class="labelwidth100">
          {{ Form::fileGroup('client_docs', 'Client Approved Timesheet') }} 
          </div>
          <div class="col-lg-3 col-md-4 col-sm-6 ">
            <div class="form-group">
              <a id="DownloadTimeSheet" >
                <button type="button" class="btn btn-primary waves-effect waves-light" id="client_docs_view" style="display: none"> Download Timesheet</button>
              </a>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 text-right" id="approved_button" style="display: none">
          <img src="https://openclipart.org/download/172030/Merlin2525-Approved-Business-Stamp-1.svg" width="100px" height="100px">
        </div>
        <span id="error_message_in_form" style="display: none;">
          
        </span>
        <div class="form-group no-margin text-right" id="submit_button">
          <button type="submit"  class="btn btn-primary waves-effect waves-light" name="raise_time_sheet" value="1" >Submit
          </button>
        </div>

        {{ csrf_field() }}
        <input type="hidden" name="presentWeekNumber" id="presentWeekNumber" value="">
        <input type="hidden" name="presentYear" id="presentYear" value="">
        <input type="hidden" name="actual_week" id="actual_week" value="">
        <input type="hidden" name="actual_year" id="actual_year" value="">
        <input type="hidden" name="employee_payrate_id" id="employee_payrate_id" value=" {{-- $pay_rates->id --}} ">

        <!-- REG HOURS OLD -->
        <input type="hidden" name="get_mon_value_reg" id="get_mon_value_reg" value="">
        <input type="hidden" name="get_tue_value_reg" id="get_tue_value_reg" value="">
        <input type="hidden" name="get_wed_value_reg" id="get_wed_value_reg" value="">
        <input type="hidden" name="get_thu_value_reg" id="get_thu_value_reg" value="">
        <input type="hidden" name="get_fri_value_reg" id="get_fri_value_reg" value="">
        <input type="hidden" name="get_sat_value_reg" id="get_sat_value_reg" value="">
        <input type="hidden" name="get_sun_value_reg" id="get_sun_value_reg" value=""> 
        <!-- OT HOURS OLD -->
        <input type="hidden" name="get_mon_value_ot" id="get_mon_value_ot" value="">
        <input type="hidden" name="get_tue_value_ot" id="get_tue_value_ot" value="">
        <input type="hidden" name="get_wed_value_ot" id="get_wed_value_ot" value="">
        <input type="hidden" name="get_thu_value_ot" id="get_thu_value_ot" value="">
        <input type="hidden" name="get_fri_value_ot" id="get_fri_value_ot" value="">
        <input type="hidden" name="get_sat_value_ot" id="get_sat_value_ot" value="">
        <input type="hidden" name="get_sun_value_ot" id="get_sun_value_ot" value="">
  </div>
</div> 
</form>

<button type="button" id="WeeklyDataModelButton" class="btn btn-primary" data-toggle="modal" data-target="#WeeklyDataModel" style="display:none;">
</button>
 <!-- The Modal -->
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="WeeklyDataModel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
          <h4 class="modal-title" id="month_year"></h4>
         {{--  <button type="button" class="close" data-dismiss="modal">&times;</button> --}}
      </div> 
      <div class="modal-body">
        <div class="editor-indent">
          <div id="monthly_table">
              
          </div>
          <table class="timesheet" >
            <thead>
              <tr  id="days_list">
               
              </tr>

            </thead>
              <tbody >
                  <tr id="array_list">
                  </tr>
                  <tr id="array_list1">
                  </tr> 
                  <tr id="array_list_total">
                  </tr>
              </tbody>
          </table>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src="