@include('includes/header')

<!-- /////////////////////////////////// MAIN CONTENT /////////////////////////////////////////-->

@include('includes/sidebar')
{{-- 
<div class="container">
    <button type="button" class="toast-btn success-toast" msg="Settings saved" icon="fa-check" icon-color="#27ae60"
        animation="slide-in-slide-out">Success</button>

    <button type="button" class="toast-btn danger-toast" msg="Error: Unable to save changes" icon="fa-xmark"
        icon-color="#c0392b" animation="slide-in-fade-out">Error</button>

    <button type="button" class="toast-btn info-toast" msg="New message received" icon="fa-info" icon-color="#2980b9"
        animation="slide-in-slide-out">Information</button>

    <button type="button" class="toast-btn warning-toast" msg="You have unsaved changes!" icon="fa-triangle-exclamation"
        icon-color="#f39c12" animation="slide-in-fade-out">Warning</button>
</div> --}}


{{-- @if (\Session::has('success'))

    <script>
        var msg = 'Welcome Back!';
        var icon = 'fa fa-check';
        var icon_color = '#27ae60';
        var animation = 'slide-in-slide-out';
        displayToastNotification(msg, icon, icon_color, animation);
    </script>

@endif --}}

@if(\Session::has('success'))
<div class="toasts">
    <div class="master-toast-notification toast-1 toast-notification slide-in-slide-out">
        <div class="toast-content">
            <div class="toast-icon wiggle-me" style="background-color:#27ae60">
                <i class="fa fa-check fa-solid"></i>
            </div>
            <div class="toast-msg"> {!! \Session::get('success') !!} </div>
        </div>
        <div class="toast-progress">
            <div class="toast-progress-bar"></div>
        </div>
    </div>
</div>

<script>
    const toast = document.querySelector('.master-toast-notification');
    function hideToast() {
        toast.classList.add('hidden');
    }
    setTimeout(hideToast, 3800);
</script>

@endif



<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <!-- Sales stats -->
            <div class="row">
                <div class="col-12">
                    <div class="card dashboard">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-3 col-sm-12 border-right-blue-grey border-right-lighten-5">
                                        <div class="pb-1">
                                            <div class="clearfix mb-1">
                                                <i class="fa fa-plus font-large-1 blue-grey float-left mt-1"></i>
                                                <span class="font-large-2 text-bold-300 info float-right"> <a href="{{route('leaves')}}?filter=0"> {{$data['leave_request_count']}} </a> </span>
                                            </div>
                                            <div class="clearfix">
                                                <span class="text-muted">Leave Request</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-12 border-right-blue-grey border-right-lighten-5">
                                        <div class="pb-1">
                                            <div class="clearfix mb-1">
                                                <i class="icon-calendar font-large-1 blue-grey float-left mt-1"></i>
                                                <span
                                                    class="font-large-2 text-bold-300 danger float-right"> <a href="{{route('leaves')}}?filter=0&comp_off=1"> {{$data['comp_requests']}} </a> </span>
                                            </div>
                                            <div class="clearfix">
                                                <span class="text-muted">Comp Off Requests</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-12 border-right-blue-grey border-right-lighten-5">
                                        <div class="pb-1">
                                            <div class="clearfix mb-1">
                                                <i class="icon-wallet font-large-1 blue-grey float-left mt-1"></i>
                                                <span
                                                    class="font-large-2 text-bold-300 success float-right"><a href="{{route('expenserequest')}}?filter=0"> {{$data['expense_requests_count']}} </a> </span>
                                            </div>
                                            <div class="clearfix">
                                                <span class="text-muted">Expense Requests</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-12 border-right-blue-grey border-right-lighten-5">
                                        <div class="pb-1">
                                            <div class="clearfix mb-1">
                                                <i class="icon-user font-large-1 blue-grey float-left mt-1"></i>
                                                <span
                                                    class="font-large-2 text-bold-300 danger float-right"><a href="{{route('clients')}}"> {{$data['clients_count']}} </a> </span>
                                            </div>
                                            <div class="clearfix">
                                                <span class="text-muted">Clients</span>
                                            </div>
                                        </div>
                                    </div>

                                    <!--<div class="col-lg-3 col-sm-12">-->
                                    <!--    <div class="pb-1">-->
                                    <!--        <div class="clearfix mb-1">-->
                                    <!--            <i class="fa fa-map font-large-1 blue-grey float-left mt-1"></i>-->
                                    <!--            <span class="font-large-2 text-bold-300 warning float-right">1</span>-->
                                    <!--        </div>-->
                                    <!--        <div class="clearfix">-->
                                    <!--            <span class="text-muted">Conveyance Request</span>-->
                                    <!--        </div>-->
                                    <!--    </div>-->
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Sales stats -->


            <div class="row">
                <div class="col-xl-5 col-lg-12">
                    <div class="card attendance">
                        <div class="card-header no-border-bottom">
                            <h4 class="card-title">Attendance Report <span class="viewwise"> (Admin View) </span></h4>
                            <ul class="list-group list-group-flush mt-2 attendance-counts">
                                <li class="list-group-item">
                                    <span class="badge badge-online badge-pill float-right onlinecount">0</span>
                                    <span class="badge badge-offline badge-pill float-right offlinecount">0</span>
                                    <span class="badge badge-inactive badge-pill float-right inactivecount">0</span>
                                    <span class="badge badge-not-working badge-pill float-right notworkingcount">0</span>
                                    Admin View
                                </li>
                            </ul>
                        </div>
                        <div class="card-content" style="height:100px">

                        </div>
                        <div class="card-footer border-top-blue-grey border-top-lighten-5 text-muted">
                            <span class="float-left">Switch to</span><br>
                            <button class="btn btn-primary btn-sm" id="teamview">Team View</button>
                            <button class="btn btn-primary btn-sm d-none" id="adminview">Admin View</button>
                            <span class="tags float-right">
                                <span class="badge badge-online badge-pill">Online</span>
                                <span class="badge badge-offline badge-pill">Offline</span>
                                <span class="badge badge-inactive badge-pill">Inactive</span>
                                <span class="badge badge-not-working badge-pill">Not Working</span>
                            </span>
                        </div>
                    </div>
                </div>

                
                <div class="col-xl-7 col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">My Team</h4>
                            <a class="heading-elements-toggle"><i class="ft-more-horizontal font-medium-3"></i></a>
                        </div>
                        <div class="card-content">
                            <div class="table-responsive" style="height: 380px; overflow: auto;">
                                <table class="table table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Attendance</th>
                                            <th>Location</th>
                                            <th>Last Update</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($data['teams'] as $team)
                                        <tr>
                                            <td class="text-truncate">  {{$team['name']}}</td>
                                            @php
                                                $att = ''; if(strlen($team['attendanceInAt']) != 0 ){ $att = 'In At: ' . $team['attendanceInAt'];  }  
                                                if(strlen($team['attendanceOutAt']) != 0 ) { $att .= 'Out At: ' . $team['attendanceOutAt'];  }  
                                                if( strlen($team['attendanceInAt']) == 0 && strlen($team['attendanceOutAt']) == 0 ){
                                                    $att = '<span class="badge badge-danger">Not checked in!</span>';
                                                }

                                                $location = 'https://www.google.com/maps/search/?api=1&query=' . $team['latitude'] . ',' . $team['longitude'];
                                                // echo $location;
                                                
                                            @endphp
                                            <td class="text-truncate"> 
                                                <span class="tag tag-default tag-success">
                                                    @if( $team['attendanceInAt'] != '' ) In At: {{ $team['attendanceInAt'] }} <br> @endif 
                                                    
                                                    @if( $team['attendanceOutAt'] != '' ) Out At: {{ $team['attendanceOutAt'] }} @endif
                                                    @if( $team['attendanceInAt'] == '' && $team['attendanceOutAt'] == '' ) <span class="badge badge-danger">Not checked in!</span> @endif
                                                </span>
                                            </td>
                                            <td class="text-truncate"><a href="{{$location}}" target="_blank"> Open In Map </a></td>
                                            <td class="text-truncate">  {{$team['lastUpdate']}}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


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

<!-- /////////////////////////////////// MAIN CONTENT ENDS /////////////////////////////////////////-->

<script>
    var base_url = "{{env('BASE_URL')}}";

        $(document).ready(function(){
        getAdminAttendanceData();

        function getAdminAttendanceData() {
            $.ajax({
                url: base_url+'getAdminAttendanceReport',
                type: 'GET',
                success: function(response){
                    if(response.status){
                        console.log('success');
                        console.log(response.data.notworkingCount);
                        // $(".onlinecount").text(response.data.onlineCount);
                        // $(".offlinecount").text(response.data.offlinecount);
                        // $(".inactivecount").text(response.data.inactiveCount);
                        // $(".notworkingcount").text(response.data.notworkingCount);

                        html = '<li class="list-group-item">';
                        html += '<span class="badge badge-online badge-pill float-right">'+response.data.onlineCount+'</span>';
                        html += '<span class="badge badge-offline badge-pill float-right">'+response.data.offlinecount+'</span>';
                        html += '<span class="badge badge-inactive badge-pill float-right">'+response.data.inactiveCount+'</span>';
                        html += '<span class="badge badge-not-working badge-pill float-right">'+response.data.notworkingCount+'</span>';
                        html += 'Admin User </li>';

                        $(".attendance-counts").empty().append(html);

                    }else{
                        console.log('error');
                    }
                }
            });
        }

        $("#adminview").click(function(){
            $("#adminview").addClass('d-none');
            $("#teamview").removeClass('d-none');
            $(".viewwise").empty().text('(Admin View)');
            // Code to switch to admin view
            console.log('Clicked on admin');
            getAdminAttendanceData();
        });

        $("#teamview").click(function(){
            $("#teamview").addClass('d-none');
            $("#adminview").removeClass('d-none');
            $(".viewwise").empty().text('(Team View)');
            console.log('Clicked on teamn');

            $.ajax({
                url: base_url+'getTeamWiseCount',
                type: 'GET',
                success: function(response){
                    if(response.status){
                        console.log('success');
                        console.log(response.data);
                        console.log(response.data);
                        let data = response.data;

                        let html = '';
                        for(let key in data){
                            html += '<li class="list-group-item">';
                            html += key + ' ';
                            let teamData = data[key][0];
                            html += '<span class="badge badge-online badge-pill float-right">' + teamData.onlineCount + '</span>';
                            html += '<span class="badge badge-offline badge-pill float-right">' + teamData.offlinecount + '</span>';
                            html += '<span class="badge badge-inactive badge-pill float-right">' + teamData.inactiveCount + '</span>';
                            html += '<span class="badge badge-not-working badge-pill float-right">' + teamData.notworkingCount + '</span>';
                            html += '</li>';
                        }
                        $(".attendance-counts").empty().append(html);

                    }else{
                        console.log('error');
                    }
                }
            });

        });
    });

</script>

@include('includes/footer')