@extends('main')

@section('css')
    <link rel="stylesheet" href="{{url('public/assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{url('public/assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}">
@endsection
@section('content')
    <div id="main-content">
        <div class="container-fluid">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-6 col-md-8 col-sm-12">
                        <h2><a href="javascript:void(0);" class="btn btn-xs btn-link btn-toggle-fullwidth"><i class="fa fa-arrow-left"></i></a>Employee Details</h2>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html"><i class="icon-home"></i></a></li>
                            <li class="breadcrumb-item">Employee</li>
                            <li class="breadcrumb-item active">Attendance</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row clearfix">
                <div class="col-lg-12">
                    <div class="card">
                        {{--                        <div class="header">--}}
                        {{--                            <h2>Employee Details</h2>--}}
                        {{--                        </div>--}}
                        <div class="row" style="margin-left: 1%;margin-top: 1%;">
{{--                            <input type="text" name="id" value="{{$attendence->id}}">--}}
                            <div class="col-lg-3 col-md-12">
                                <p> <b>Date</b> </p>
                                <div class="input-daterange input-group" data-provide="datepicker">
                                    <input type="text" class="input-sm form-control" id="startDate" value="{{$start}}" readonly>
                                    <span class="input-group-addon text-center" style="width: 40px;">to</span>
                                    <input type="text" class="input-sm form-control" id="endDate" value="{{$end}}" readonly>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-12">
                                <label></label>
                                <div class="input-group mb-3" style="margin-top: 3%;">
{{--                                    <button class="btn btn-info" onclick="onDateSearch()">Search</button>--}}
                                </div>
                            </div>
                            @if(Auth::user()->fkUserType == "admin" ||Auth::user()->fkUserType == "manag")
                                @if(App\EmployeeInfo::where('id', $empId)->first()->fkDepartmentId !=6)
                            <div class="col-lg-2 col-md-12">
                                <label></label>
                                <div class="input-group mb-3" style="margin-top: 3%;">
                                    <a href="javascript:void(0);" class="btn btn-info" data-toggle="modal" data-target="#addinsert">Insert Time</a>
                                </div>
                            </div>
                                <div class="col-lg-2 col-md-12">
                                    <label></label>
                                    <div class="input-group mb-3" style="margin-top: 3%;">
                                        <a href="javascript:void(0);" class="btn btn-info" data-toggle="modal" data-target="#addinsertTeam">Insert Team Time</a>
                                    </div>
                                </div>
                                @endif
                            <div class="col-lg-2 col-md-12">
                                <label></label>
                                <div class="input-group mb-3" style="margin-top: 3%;">
                                    <a href="javascript:void(0);" class="btn btn-info" data-toggle="modal" data-target="#addcontact">Add Comment</a>
                                </div>
                            </div>

                                @endif
                        </div>
                        <div class="body">
                            <div class="table-responsive">
                                <table id="attendanceDetails" class="table table-bordered table-hover table-striped m-b-0 c_list">
                                    <thead>
                                    <tr>
                                        <th class="text-center">attDeviceUserId</th>
                                        <th class="text-center">Name</th>
                                        <th class="text-center">attendanceDate</th>
                                        <th class="text-center">checkInFull</th>
                                        <th class="text-center">checkoutFull</th>
                                        <th class="text-center">late</th>
                                        <th class="text-center">lateTime</th>
                                        <th class="text-center">scheduleIn</th>
                                        <th class="text-center">scheduleOut</th>
                                        <th class="text-center">workingTime</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($results as $result)
                                        <tr>
                                    <td class="text-center">{{$result->attDeviceUserId}}</td>
                                    <td class="text-center">{{$result->fullName}}</td>
                                    <td class="text-center">{{$result->attendanceDate}}</td>
                                    <td class="text-center">{{$result->checkInFull}}</td>
                                    <td class="text-center">{{$result->checkoutFull}}</td>
                                    <td class="text-center">{{$result->late}}</td>
                                    <td class="text-center">{{$result->lateTime}}</td>
                                    <td class="text-center">{{$result->scheduleIn}}</td>
                                    <td class="text-center">{{$result->scheduleOut}}</td>
                                    <td class="text-center">{{$result->workingTime}}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="addcontact">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4><a href="javascript:void(0);" class="btn btn-xs btn-link btn-toggle-fullwidth"></a>Comments</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form method="post" action="{{route('comment.insert')}}">
                                {{csrf_field()}}
                                <input type="hidden" name="fkemployeeId" value="{{$empId}}">
                                <div class="col-md-6 col-sm-12">
                                    <label>Comments</label>
                                    <div class="form-group">
                                        <textarea placeholder="remark" class="form-control" name="comment"></textarea>
                                    </div>
                                </div>


                                <div class="modal-footer justify-content-between">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary" >Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="addinsert">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4><a href="javascript:void(0);" class="btn btn-xs btn-link btn-toggle-fullwidth"></a>Add Time</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form method="post" action="{{route('time.insert')}}">
                                {{csrf_field()}}
                                <input type="hidden" name="fkemployeeId" value="{{$empId}}">

                                <div class="row">
                                    <div class="col-md-6 col-sm-12">
                                        <p> <b>Select Date</b> </p>
                                        <div class="input-group mb-3">
                                            <input data-provide="datepicker"  name="date" data-date-autoclose="true" class="form-control" value="{{date('m/d/Y')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12">
                                        <p> <b>Select Time</b> </p>
                                        <div class="form-group">
                                            <input type="time"   name="time" class="form-control date">
                                        </div>
                                    </div>
                                </div>


                                <div class="modal-footer justify-content-between">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary" >Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="addinsertTeam">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4><a href="javascript:void(0);" class="btn btn-xs btn-link btn-toggle-fullwidth"></a>Add Time</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form method="post" action="{{route('team.time.insert')}}">
                                {{csrf_field()}}
                                <input type="hidden" name="fkemployeeId" value="{{$empId}}">

                                <div class="row">
                                    <div class="col-md-6 col-sm-12">
                                        <p> <b>Select Date</b> </p>
                                        <div class="input-group mb-3">
                                            <input data-provide="datepicker"  name="date" data-date-autoclose="true" class="form-control" value="{{date('m/d/Y')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12">
                                        <p> <b>Select Time</b> </p>
                                        <div class="form-group">
                                            <input type="time"   name="time" class="form-control date">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <p> <b>Select Team</b> </p>
                                        <div class="input-group mb-3">
                                            <select class="form-control" name="teamId">
                                                <option>Select Team</option>
                                                @foreach($managerTeam as $mngteam)
                                                    <option value="{{$mngteam->mteamId}}">{{$mngteam->mteamName}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                </div>


                                <div class="modal-footer justify-content-between">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary" >Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="body">
                            <div class="table-responsive">
                                <table id="leave" class="table table-bordered table-hover table-striped m-b-0 c_list">
                                    <thead>
                                    <tr>
                                        <th class="text-center">Start Date</th>
                                        <th class="text-center">End Date</th>
                                        <th class="text-center">Days</th>
                                        <th class="text-center">Cause</th>
                                        <th class="text-center">Category</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($leaves as $leaves)
                                        <tr>
                                            <td class="text-center">{{$leaves->startDate}}</td>
                                            <td class="text-center">{{$leaves->endDate}}</td>
                                            <td class="text-center">{{$leaves->noOfDays}}</td>
                                            <td class="text-center">{{$leaves->remarks}}</td>
                                            <td class="text-center">{{$leaves->categoryName}}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="body">
                            <div class="table-responsive">
                                <table id="comments" class="table table-bordered table-hover table-striped m-b-0 c_list">
                                    <thead>
                                    <tr>
                                        <th class="text-center">Comments</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($comments as $comments)
                                        <tr>
                                            <td class="text-center">{{$comments->comment}}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script src="{{url('public/assets/js/pages/tables/jquery-datatable.js')}}"></script>
    <script src="{{url('public/assets/bundles/datatablescripts.bundle.js')}}"></script>
    <script src="{{url('public/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>

    <script>
        $(document).ready(function() {
            $('#attendanceDetails').DataTable();
            $('#leave').DataTable();
        } );
    </script>
@endsection