@extends('layouts.customer')

@section('content')
    <style>.search.search-sm:after {content: '' !important;} </style>
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Staff</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                             <li class="breadcrumb-item">
                                <a href="{{url('/')}}/dashboard">Dashboard</a>
                            </li>
                            
                            <li class="breadcrumb-item">
                                <a href="{{ route('staffs.index', ['account' => $account]) }}">Staff</a>
                            </li>

                            <li class="breadcrumb-item active" aria-current="page">Staff</li>
                        </ol>
                    </nav>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row mb-2">
                @if ($message = Session::get('success'))
                    <div class="w-100 alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                @endif
            </div>

            <div class="row mb-4">
                <div class="col-12 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <div>
                                @if( $staffs )
                                    <div class="mb-2">
                                        <div style="display: flex; align-items: center; justify-content:center;margin-bottom:2rem;">
                                            {!! Form::open(['route' => ['staffs.clock.index', ['account'=>$account]], 'method' => 'GET', 'style'=>'display:inline']) !!}
                                            {{ Form::hidden( 'from', \Carbon\Carbon::parse( $dt )->modify('previous week monday')->format('Y-m-d') ) }}
                                            {{ Form::hidden( 'to', \Carbon\Carbon::parse( $dt )->modify('previous week sunday')->format('Y-m-d') ) }}
                                            <button type="submit" class="btn btn-info"><i class="fas fa-chevron-left " aria-hidden="true"></i></button>
                                            {!! Form::close() !!}
                                            <div class="mx-2" style="font-size: 18px; font-weight: 600;">{{ $dt->startOfWeek()->format('F j') }} - {{ $dt->endOfWeek()->format('F j') }}</div>
                                            {!! Form::open(['route' => ['staffs.clock.index', ['account'=>$account]], 'method' => 'GET', 'style'=>'inline']) !!}
                                            {{ Form::hidden( 'from', \Carbon\Carbon::parse( $dt )->modify('next week monday')->format('Y-m-d') ) }}
                                            {{ Form::hidden( 'to', \Carbon\Carbon::parse( $dt )->modify('next week sunday')->format('Y-m-d') ) }}
                                            <button type="submit" class="btn btn-info"><i class="fas fa-chevron-right" aria-hidden="true"></i></button>
                                            {!! Form::close() !!}

                                        </div>
                                    </div>
                                    <div style="max-height: 500px; overflow-y:auto;">
                                        @php
                                            $defaultImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEXm5uampqajo6Pa2trp6emhoaHl5eXg4OCoqKjc3Nzf39/W1tatra2wsLDIyMi8vLy2trbExMTOzs61tbXhv6YVAAAEl0lEQVR4nO2d27aqMAxFpYSbioL+/79uEPEGW4WmSepY8+287Tlikza0OZsNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKUMcmL4ptUeTDP36JTqc6ted9mTiXOZeU+3N7qja/YtnZHZqyF3ukUy2bQ2ep/ed5Q9tD7V7s7pauPmzjdqS0SebtbpZJk8brSOn5n+g9R/IcqSNVdfZRbyCrq/gcKW+/iN89jm0emSPt9t/7XRz3u6gUqV3md3Fs41Gk/LxcsFM8x/JLpapcI9gplnEkHNqt0huIYTHSbl0Ar2G0r0ipj2CnaL36U+Un2CkaX4tF6SmYJGWhLfGW2jeEXRBrbYk30NFfsFM8mv2d0u7brfZ7MrMJNWfx68m1Vebh+Y32GP2d+pX6F0Wbv9OaTTBJLOZTOvGkmYHsZDCIe0bBJNlr60zgqhQj9ioGca7CntqaYcUbwi6IlbbSM3y1cMRaTcz9zxSvlLY2NozVfsTttKUeWdM9/Ghoq7vInUl7TO1rtgEEk2SrrXWHc9N9x9L2mw5BDA+GDNmr4cXQUkUMkWhMpZoA9b7HUM0vgggmiZ3OqXejex5nZ/Pt+a3iX8NUW+xGyn10Gsjs7EyZz/cwVOD31+Hv59IwRwtLh4vf39PkvN3gkb0dQ2qCnC0aO2eLEG0aW40aOgUxtPR1Jki5MFQsAqUaQ4kmTBvDVBMjyEI0tQzDnPLtnPB7qGEXNFQNL7AfoAwdnQaIe2taGgshe9vbUsP7Ct+VrwFLxXCAd29qaU96g+Hy7B2T12g5V6LBVXiBb3Nq70bUBWJrDGdWL+xzJRuTaeYKw0V241fZedqKdpqIUziuLFi6oDCD/z1ak3dnH6HWTzEznGWu+CVUy2n0hk8UI4hgDx3WKmZGN2sTaPdhkMI8LooXpANUrCj9ri6iEexZnG9cq/0nL2ThyIHYBg700JJPbq6JbhoPbdtFj/Jd2UY1qIbS44KxH1dHd7R6KpxAabPYb3CMYxgPFev8ro7mKwblbea1L82MD6pZPJZmxtFy3aCc6bW61TBSunJqy0SxtJlxfr4jnB9Z3wE31r7MUOGdYp5xe1t1g20JPiiaWoyUMusN2FEM87DLUOc0lKAZxXCCRhSpCubXY2BqFOvH7Sn6n7tzlg9q/+Nq5dIf5m3lk6LuFcX17e3vUW2E+8+f+wbNGXWBXiG8ondZOMwV/Sl6n9wCPeiaUdR64iXzG+3RuUEUZszAPDpn/kJOsFNU2NqEr/VPhgp1X6QUPiiKP6CRDaFGEIVDKB9E6RDKBzHUJIx3iKZTyVo4IlsT2d+PfIPoG5NAgzDekwnuTuXzTI9krgn0/v4Tgu/zA3ZI3yE3Z1DnRyr5MxVqXkwRa2eI79hGpHZuYeYLfGUodMtdaxkKLkStZSjWr9HYdY/I7L7FmohTZNqKeolGKtVIdbpnDUW633qpVCqZss+XX4LILHqV0++IyCmYe7TAMiR2pqLd/FdEuvu/b7jV6NGMZBJvhH/fkP3/6lhkKHFC3GZOD5EY5qkm1i5HAwAAAAAAAAAAAAAAAAAAAACAJf4AKkJE8O36wbkAAAAASUVORK5CYII="; 
                                            $days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; 
                                        @endphp
                                        <div style="display: flex;">
                                            <div style="width: 200px; background-color: rgb(254, 254, 254); padding: 10px 5px; border: 1px solid rgb(221, 221, 221); border-collapse: collapse; display: flex;"></div>
                                            @foreach( $days as $key => $day)
                                                <div style="border: 1px solid rgb(221, 221, 221); flex: 1 1 0%; position: relative;">
                                                    <div style="flex: 1 1 0%; text-align: center; padding: 10px 5px; height: 100%; background-color: rgb(255, 255, 255);">
                                                        <p>{{ $dt->startOfWeek()->addDays( $key )->format('F j, Y') }}</p>
                                                        <strong>{{ $day }}</strong>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        @foreach( $staffs as $staff ) 
                                            <div style="display: flex;">
                                                <div style="width: 200px; background-color: rgb(254, 254, 254); padding: 10px 5px; border: 1px solid rgb(221, 221, 221); border-collapse: collapse; display: flex;">
                                                    <img style="width: 45px; height: 45px; border-radius: 50px; object-fit: cover; border: 1px solid rgb(169, 42, 64);" src="{{ $staff->profile_image ?? $defaultImage }}" />
                                                    <div class="ml-2 ">
                                                        <div style="font-weight: 600;font-size: 14;">{{ $staff->first_name .' '. $staff->last_name }}</div>
                                                        <div style="font-weight: bold;font-size: 12px;color: #a92a40;"></div>
                                                    </div>
                                                </div>
                                                @foreach( $days as $key => $day)
                                                    <div style="border: 1px solid rgb(221, 221, 221); flex: 1 1 0%; position: relative;">
                                                        <!-- renderContent -->
                                                        @php
                                                            $k = (int) $dt->startOfWeek()->addDays( $key )->format('Ymd');
                                                            if( array_key_exists( $k, $staff->clock ) ) {
                                                                $clock_time = $staff->clock[$k];
                                                                if( !empty( $clock_time ) && !empty($clock_time['total_time']) ) {
                                                                    /*echo '
                                                                        <div style="flex: 1 1 0%; text-align: center; padding: 10px 5px; height: 100%; background-color: rgb(131, 224, 133);">
                                                                            <p>'. $clock_time['check_in'] .'-'. $clock_time['check_out'] .'</p>
                                                                            <strong style="color: rgb(169, 42, 64);">'. $clock_time['total_time'] .'</strong>
                                                                        </div>
                                                                    ';*/

                                                                    echo '
                                                                        <div style="flex: 1 1 0%; text-align: center; padding: 10px 5px; height: 100%; background-color: rgb(131, 224, 133);">
                                                                            <strong style="color: rgb(169, 42, 64);">'. $clock_time['total_time'] .'</strong>
                                                                        </div>
                                                                    ';
                                                                } else {
                                                                    echo '
                                                                        <div style="flex: 1 1 0%; text-align: center; padding: 10px 5px; height: 100%; background-color: rgb(255, 255, 255);"></div>
                                                                    ';
                                                                }
                                                            } else {
                                                                echo '
                                                                    <div style="flex: 1 1 0%; text-align: center; padding: 10px 5px; height: 100%; background-color: rgb(255, 255, 255);"></div>
                                                                ';
                                                            }
                                                        @endphp
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- <div class="row">
                <div class="col-12">
                    <form class="mb-2" action="{{ route('staffs.clock.index', ['account' => $account]) }}">
                        <a class="btn pt-0 pl-0 d-inline-block d-md-none" data-toggle="collapse" href="#displayOptions" role="button" aria-expanded="true" aria-controls="displayOptions">
                            Display Options
                            <i class="simple-icon-arrow-down align-middle"></i>
                        </a>
                        <div class="collapse d-md-block" id="displayOptions">
                            <div class="d-block d-md-inline-block">
                                <div class="search search-sm d-inline-block float-md-left mr-1 mb-1 align-top">
                                    <input placeholder="Search by name" name="search" value="{{ $request->search ?? '' }}">
                                </div>

                                <div class="search-sm calendar-sm d-inline-block float-md-left mr-1 mb-1 align-top">
                                    <input class="form-control" id="from" name="from" placeholder="From date" value="{{ $request->from ?? '' }}">
                                </div>
                                <div class="search-sm calendar-sm d-inline-block float-md-left mr-1 mb-1 align-top">
                                    <input class="form-control" id="to" name="to" placeholder="To date" value="{{ $request->to ?? '' }}">
                                </div>
                            </div>
                            <div class="float-md-right">
                                @if( $roles )
                                    <div class="btn-group float-md-left mr-1 mb-1">
                                        <button class="btn btn-outline-dark btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Filter By Role
                                        </button>
                                        <div class="dropdown-menu filter">
                                            @foreach( $roles as $role )
                                                <a class="dropdown-item @if( $role->id == $request->role_id ) selected @endif" data-id="{{ $role->id ?? '' }}">{{ $role->name ?? '' }}</a>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                <input type="hidden" id="role_id" name="role_id" value="{{ $request->role_id ?? '' }}">

                                <button class="btn btn-outline-dark btn-xs" type="submit">
                                    <span class="iconsminds-magnifi-glass"></span> Search
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div> --}}

            {{--
            <div class="row mb-4">
                <div class="col-12 mb-4">
                    <div class="card">
                        
                        <div class="card-body">
                            <div id="DataTables_Table_0_wrapper">
                            <table class="data-table" id="DataTables_Table_0"> <!-- data-table data-table-feature -->
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Name</th>
                                        <th>Employee ID</th>
                                        <th>Clock Time</th>
                                        <th>View</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if($staffs)
                                    <pre>
                                   
                                    </pre>
                                        @php $i = 0; @endphp
                                        @foreach($staffs as $staff)
                                            <tr>
                                                <td>{{ date('F j, Y', strtotime(now())) }}</td>
                                                <td>
                                                    <div class="d-flex flex-row">
                                                        <a class="d-flex">
                                                            <img alt="Profile Picture" src="{{ $staff->getProfileImage() ?: url('img/profiles/default.png') }}" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
                                                        </a>
                                                        <div class="d-flex flex-grow-1 min-width-zero">
                                                            <div class="m-2 pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
                                                                <div class="min-width-zero">
                                                                    <a>
                                                                        <p class="mb-0 truncate">{{ $staff->getName() }}</p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>EP-00-01-{{ $staff->id }}</td>
                                                <td>{{ $staff->clocked_time ?? '' }}</td>
                                                <td>
                                                    <div class="dropdown">
                                                        <div style="cursor: pointer;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="glyph-icon simple-icon-options-vertical"></div>
                                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <a class="dropdown-item pe-3" href="{{ route('staffs.clock.show',['account'=>$account,'staff'=>$staff->id]) }}">
                                                                <i class="simple-icon-eye"></i> View
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr colspans="5">
                                            <p>No records found!</p>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                          </div>  
                        </div>
                    </div>
                </div>
            </div>
            --}}
        </div>
@endsection

@section('script')
<script>
    $( function() {
        var from = $( "#from" ).datepicker().on( "changeDate", function(e) {
            to.datepicker( "setStartDate", e.date );
        }),
        to = $( "#to" ).datepicker().on( "changeDate", function(e) {
            from.datepicker( "setEndDate", e.date );
        });

        $(document).ready(function(){
            let $default = 'Filter By Role';
            let current = $('.filter.dropdown-menu a.selected').text();
            if( '' != current ) {
                $('.filter.dropdown-menu').parent().find('button').text( current )
            } else {
                $('.filter.dropdown-menu').parent().find('button').text( $default )
            }
            $('.filter.dropdown-menu a').on('click', function() {
                $('#role_id').val($(this).data('id'));
                if( '' != $(this).text() ) {
                    $(this).parents('.filter.dropdown-menu').parent().find('button').text( $(this).text() )
                } else {
                    $(this).parents('.filter.dropdown-menu').parent().find('button').text( $default )
                }
            });  
        });
    });
</script>
@endsection