@extends('layouts.admin')

@section('content')

    <div class="container">

        @if($getuserreport->id == $user->id)
            <div class="row">

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

                    <table class="table">
                        <thead>
                        <tr>

                            <th scope="col">Title </th>
                            <th scope="col">Category </th>
                            <th scope="col">Date</th>
                            <th scope="col">Time</th>
                            <th scope="col">Comment</th>
                            <th>Create</th>


                        </tr>
                        </thead>
                        <tbody>

                        <tr>
                            {!! Form::open(['method' => 'POST', 'action'=> 'App\Http\Controllers\TimesheetsController@store','files'=>true]) !!}
                            <td>
                                <div class="form-group">

                                    {!! Form::select('title', $titlearray, null, ['class' => 'form-control selecttitle']) !!}
                                </div>
                            </td>
                            <td>
                                <div class="form-group" style="position: relative">

                                    {!! Form::select('category',[] , null, ['class' => 'form-control seleccategory']) !!}
                                    <div class="overlay"></div>
                                </div>
                            </td>
                            <td>
                                <div class="form-group" >

{{--                                    {!! Form::text('uniquetime', $date, ['class' => 'form-control csheet','readonly' => 'true']) !!}--}}
{{--                                    <input type="text" class="form-control m-2" name="start_time"--}}
{{--                                           id="finish_time" placeholder="select start date" autocomplete="off">--}}
                                    {!! Form::text('uniquetime', $date, ['class' => 'form-control csheet']) !!}
                                </div>
                            </td>
                            <td>
                                <div class="form-group d-flex" >
                                <span class="input-group-prepend">
                                    <button type="button" class="btn btn-outline-secondary btn-number" disabled="disabled" data-type="minus" data-field="spend_time">
                                        <span class="fa fa-minus"></span>
                                    </button>
                                </span>
                                    <input type="text" name="spend_time" class="form-control input-number" value="0.5" min="0.5" max="100" style="width: 70px;text-align:center">
                                    <span class="input-group-append">
                                    <button type="button" class="btn btn-outline-secondary btn-number" data-type="plus" data-field="spend_time">
                                        <span class="fa fa-plus"></span>
                                    </button>
                                </span>
                                </div>
                            </td>

                            <td>
                                <div class="form-group">

                                    {!! Form::text('comment', null, ['class' => 'form-control']) !!}
                                </div>
                            </td>

                            <td>
                                <div class="form-group">
                                    {!! Form::submit('Create', ['class'=>'btn btn-primary']) !!}
                                </div>
                            </td>

                            {!! Form::close() !!}
                        </tr>
                        </tbody>
                    </table>
                    <div class="row" style="justify-content: center">
                        @include('includes.form_error')
                    </div>
                </div>
            </div>
        @endif


    {{-- datatable and chart --}}
     <div class="row">
          {{-- datatable --}}
                <div class="col-md-11">
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Current Month Report- <span style="color:green">{{$getuserreport->name}}</span></h6>
                        </div>

                        <div class="card-body">
                            <table class="table table-user-month table-bordered dataTable" id="table_id">
                                <thead>
                                <tr>

                                    <th scope="col">Title </th>
                                    <th scope="col">Category </th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Comment</th>
                                    <th scope="col">Time</th>


                                    <th>Delete </th>
                                    <th>Total time</th>


                                </tr>
                                </thead>
                                <tbody>
                                @foreach($timesheetmonth as $tsu)
                                    <tr class="singlerowsheet">

                                        <td>
                                            <div class="singletitle" class="{{$tsu->title}}">
                                                {{$tsu->title}}
                                            </div>
                                        </td>

                                        <td>
                                            <div>
                                                {{$tsu->category}}
                                            </div>
                                        </td>

                                        <td>
                                            <div>

                                                {{convertPersianNumbersToEnglish($tsu->uniquetime)}}
                                            </div>
                                        </td>

                                        <td>
                                            <div>
                                                {{$tsu->comment}}
                                            </div>
                                        </td>

                                        <td>
                                            <div class="spendTime">
                                                {{$tsu->spend_time}}
                                            </div>
                                        </td>

                                        <td>
                                            <div>
                                                <form action="{{ route('timesheet.delete', $tsu)}}" method="POST" enctype="multipart/form-data">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger">delete</button>
                                                </form>
                                            </div>
                                        </td>
                                        <td>

                                        </td>

                                    </tr>
                                @endforeach

                                <tr class="finallresult">
                                    <td class="title">
                                        Total Hours
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="sum">

                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
              {{-- chart start --}}
                <div class="col-md-11 mt-2" style="display: flex;align-items:center">
                   
                    <div class="col-xl-12 col-lg-12">
                      
                        <div class="card shadow mb-4" style="width: 100%">
                            <!-- Card Header - Dropdown -->
                            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                <h6 class="m-0 font-weight-bold text-primary">Percentage</h6>
                            
                               
              
                            </div>
                            <!-- Card Body -->
                            <div class="card-body">
                                <div class="chart-pie pt-4 pb-2"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                                    <canvas id="myPieChart" width="447" height="306" style="display: block; height: 245px; width: 358px;" class="chartjs-render-monitor"></canvas>
                                </div>
                                <div class="mt-4 text-center small subtitlePiechart">
                             
                            </div>
                         
                        
                        </div>
                        <div class="totalhourse">
                            <div class="title">
                                Total Hours
                            </div>
                            <div class="sum">
                        
                            </div>
                        </div>
                    </div>
                </div>
            {{-- chart end --}}
     </div>
     {{-- datatable and chart end --}}
    

 


 </div>
 

<script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('js/Chart.min.js')}}"></script>
  
    

<script src="{{asset('js/chart-pie-demo.js')}}"></script>
 <script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>

 <script>
     $(document).ready(function(){
         
            $('.btn-number').click(function(e){
                e.preventDefault();
                
                fieldName = $(this).attr('data-field');
                type      = $(this).attr('data-type');
                var input = $("input[name='"+fieldName+"']");
                var currentVal = parseFloat(input.val());
            
                if (!isNaN(currentVal)) {
                    if(type == 'minus') {
                        
                        if(currentVal > input.attr('min')) {
                            input.val(currentVal - 0.5).change();
                        } 
                        if(parseFloat(input.val()) == input.attr('min')) {
                            $(this).attr('disabled', true);
                        }

                    } else if(type == 'plus') {

                        if(currentVal < input.attr('max')) {
                            input.val(currentVal + 0.5).change();
                        }
                        if(parseFloat(input.val()) == input.attr('max')) {
                            $(this).attr('disabled', true);
                        }

                    }
                } else {
                    input.val(0);
                }
            });
            $('.input-number').focusin(function(){
            $(this).data('oldValue', $(this).val());
            });
            $('.input-number').change(function() {
                
                minValue =  parseFloat($(this).attr('min'));
                maxValue =  parseFloat($(this).attr('max'));
                valueCurrent = parseFloat($(this).val());
                
                name = $(this).attr('name');
                if(valueCurrent >= minValue) {
                    $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
                } else {
                    alert('Sorry, the minimum value was reached');
                    $(this).val($(this).data('oldValue'));
                }
                if(valueCurrent <= maxValue) {
                    $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
                } else {
                    alert('Sorry, the maximum value was reached');
                    $(this).val($(this).data('oldValue'));
                }
            });

            $(".input-number").keydown(function (e) {
                // Allow: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
                    // Allow: Ctrl+A
                    (e.keyCode == 65 && e.ctrlKey === true) || 
                    // Allow: home, end, left, right
                    (e.keyCode >= 35 && e.keyCode <= 39)) {
                        // let it happen, don't do anything
                        return;
                }
                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });


            $('.selecttitle').on('change', function() {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                var id = this.value ;
                var getUrl = window.location;
                $.ajax({
                    /* the route pointing to the post function */
                    
                    url: `${getUrl.origin}/admin/user/timesheet/ajaxgetcat`,
                    type: 'POST',
                    /* send the csrf-token and the input to the controller */
                    data: {_token: CSRF_TOKEN, id:id},
                    dataType: 'JSON',
                    /* remind that 'data' is the response of the AjaxController */
                    beforeSend:function(data){ // Are not working with dataType:'jsonp'
                        $('.overlay').css('display','flex').html('loading...')
                    },
                    success: function (data) { 
                        $('.overlay').css('display','none')
                        console.log(data);
                        //add to category
                        $('.seleccategory option').remove();
                        for(let i =0;i<data.length;i++) {
                            var d = new Option(`${data[i]}`, `${data[i]}`);
                        $('.seleccategory').append(d);
                        }
                      
                    }
                }); 
                });

                //sum all hours
                var sumtimes=0;
                $('.spendTime').each(function(){
                    var time = parseFloat($(this).html());
                    
                    sumtimes = time+sumtimes;
                   


                })

                console.log(sumtimes,'summm')
                
                $('.sum').html(sumtimes);

 
    
    
    
     })
 </script>
@endsection