@include('components/uheader')
@include('components/usidebar')
<!--  Begin CONTENT AREA  -->
<div id="content" class="main-content">
    <style>
    .jobSheet_content {
    width: 97% !important;
    }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    
    <div class="topbar_content mt-3">
        <h2>Add Attendence</h2>
        <div class="viewAll mr-4">
            <a href="/employee_dashboard" class="viewAllBtn">
                <button class="btn btn-danger mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-arrow-left">
                    <line x1="19" y1="12" x2="5" y2="12"></line>
                    <polyline points="12 19 5 12 12 5"></polyline>
                    </svg> Back
                </button>
            </a>
        </div>
    </div>
<div class="layout-px-spacing layout-top-spacing">
<div class="modal-footer"></div>
<div class="row justify-content-center">
    <div class="jobSheet_content" id="edit_popup" style="display:block!important;">
        <div class="leave_content mt-3">
            <form action="{{route ('attendance.store')}}" class="form-group" method="post">
                {{csrf_field()}}
                <div class="row justify-content-around">
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                        <label for="">Employee ID</label>
                        <input type="text" class="form-control" name="emp_id" value="{{$employee_data->id}}"
                        readonly id="emp_id">
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                        <label for="">Employee Name</label>
                        <input type="text" class="form-control"
                        value="{{$employee_data->first_name}} {{$employee_data->last_name}}" name="emp_name"
                        readonly id="emp_name">
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                        <label for="">Employee Email</label>
                        <input type="text" class="form-control" value="{{$employee_data->official_email}}"
                        name="emp_email" readonly id="emp_email">
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                        <label for="">Phone NO.</label>
                        <input type="text" class="form-control" value="{{$employee_data->phone_number}}"
                        name="phone_no" readonly id="phone_no">
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                        <label for="">Date</label>
                        <div class="date-field-with-icon">
                            <input type="text" placeholder="Select Date" class="form-control clear_Data" name="date" id="date_get" value="{{ old('date') }}" onkeypress="return false;" autocomplete="off">
                            <div class="date-icon"><img src="{{asset('design/img/date-icon.svg')}}" alt="date" />
                            </div>
                        </div>
                        <span class="text-danger">
                            @if($errors->has('date'))
                                @foreach($errors->get('date') as $error)
                                    {{$error}}
                                @endforeach
                            @endif
                        </span>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                        <label for="">Start Time</label>
                        <input type="time" onkeypress="return false;" class="form-control clear_Data start_time" name="arr_time" id="start_time" value="{{ old('arr_time') ? old('arr_time') : '00:00'}}">
                        <span class="text-danger">
                            @if($errors->has('arr_time'))
                            @foreach($errors->get('arr_time') as $error)
                            {{$error}}
                            @endforeach
                            @endif
                        </span>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                        <label for="">End Time</label>
                        <input type="time" onkeypress="return false;" class="form-control clear_Data end_time" name="dep_time" id="end_time" value="{{old('dep_time') ? old('dep_time') : '00:00'}}">
                        <span class="text-danger">
                            @if($errors->has('dep_time'))
                            @foreach($errors->get('dep_time') as $error)
                            {{$error}}
                            @endforeach
                            @endif
                        </span>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                        <label for="">Break Time</label>
                        <input type="time" onkeypress="return false;" class="form-control clear_Data break_time" name="break_time" id="break_time" value="{{old('break_time') ? old('break_time') : '00:00'}}">
                        <span class="text-danger">
                            @if($errors->has('break_time'))
                            @foreach($errors->get('break_time') as $error)
                            {{$error}}
                            @endforeach
                            @endif
                        </span>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                        <label for="">Work Type</label>
                        <select class="form-control clear_Data" name="work_type">
                            @if(old('work_type') == 'WFO')
                            <option selected value="WFO">WFO</option>
                            <option value="WFH">WFH</option>
                            <option value="Select Work Type">Select Work Type</option>
                            @elseif(old('work_type') == 'WFH')
                            <option selected value="WFH">WFH</option>
                            <option value="WFO">WFO</option>
                            <option value="Select Work Type">Select Work Type</option>
                            @elseif(old('work_type') == 'Select Work Type')
                            <option selected value="Select Work Type">Select Work Type</option>
                            <option value="WFO">WFO</option>
                            <option value="WFH">WFH</option>
                            @else
                            <option selected value="Select Work Type">Select Work Type</option>
                            <option value="WFO">WFO</option>
                            <option value="WFH">WFH</option>
                            @endif
                        </select>
                        <span class="text-danger">
                            @if($errors->has('work_type'))
                                @foreach($errors->get('work_type') as $error)
                                    {{$error}}
                                @endforeach
                            @endif
                        </span>
                    </div>
                    <div class="col-md-12 d-flex flex-wrap align-items-end mt-3">
                        <div class="form-group">
                            <label for="">Total Time</label>
                            <input type="text" class="form-control ttl_hours clear_Data" name="total_time" readonly id="ttl_hours" value="{{old('total_time')}}">
                            <input type="hidden" name="remote_employee" value="remote">
                        </div>
                    </div>
                    <div class="form-inline">
                        <div class="form-group mr-3">
                            <button class="btn pmd-ripple-effect btn-success pmd-btn-raised ">Submit</button>
                        </div>
                        <div class="form-group">
                            <button class="btn pmd-ripple-effect btn-primary pmd-btn-raised reset_data" type="reset">Reset</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@include('components/ufooter')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    flatpickr(".timepicker", {
        enableTime: true,
        noCalendar: true,
        dateFormat: "H:i",
        time_24hr: true
    });
</script>
<script>
    var ss = $(".basic").select2({
        tags: true,
    });

    $('.start_time, .end_time, .break_time').change(function(){
        var s_time = $('.start_time').val().toString();
        var e_time = $('.end_time').val().toString();
        var b_time = $('.break_time').val().toString();

        var split_Stime = s_time.split(':');
        var split_Etime = e_time.split(':');
        var split_Btime = b_time.split(':');
      
        var min = (split_Etime[1] - split_Stime[1]) - split_Btime[1];
        var hour_carry = 0;
        if(min < 0){
           min += 60;
           hour_carry += 1;
        }
        ttl = (split_Etime[0]-split_Stime[0]-hour_carry) - split_Btime[0];
        diff = ttl + ":" + min;
        console.log(s_time,e_time,b_time,diff);
        $('.ttl_hours').val(diff);
    });

    // function getttltime() {
    //     var start_time = $(".start_time").val();
    //     var split = start_time.split(":");
    //     var end_time = $(".end_time").val();
    //     var split2 = end_time.split(":");
    //     var num = (~~split[0]);
    //     var num2 = (~~split2[0]);
    //     if (num2 < num) {
    //         var num = num - 12;
    //         var num2 = num2 + 12;
    //     }
    //     var ttl = num2 - num;
    //     var min = (~~split2[1]) - (~~split[1]);
    //     $(".ttl_day").val(Math.abs(ttl) + ":" + Math.abs(min));
    // }
    $(".reset_data").click(function(){
        location.reload();
    })
    var date = $("#date").val();
    $("#date").val(date);

    $("#date").datepicker({
        dateFormat: "dd/mm/yy"
    });
    $("#date_get").datepicker({
        dateFormat: "dd/mm/yy"
    });
</script>
@if(session('error'))
    <script type="text/javascript">
        swal.fire({
            title: '{{session("error")}}',
            type: 'warning'
        })
    </script>
@endif