@extends('layouts.'.env('THEME'))

@section('moreStyle')
    @include('staff.schedule.style')
@endsection

@section('content')

<div class="container" id="main-container">

    <div class="row mt-3">
        <div class="col-2">
            <a href="/customers" class="btn btn-primary">
                Customers
            </a>
        </div>
        <div class="col-2">
            <a href="/admin_tasks" class="btn btn-primary">
                Admin to do
            </a>
        </div>
        <div class="col-2">
            <a href="/staff/worklog" class="btn btn-primary">
                Work log
            </a>
        </div>
        <div class="col-2">
            <a href="/staff/schedule" class="btn btn-primary">
                Schedule
            </a>
        </div>
        <div class="col-2">
            <a href="/champion_dashboard/referrals" class="btn btn-primary">
                Referrals
            </a>
        </div>
    </div>

    @if(sizeof($need_update) > 1)
        <div class="panel-collapse mt-3" data-panel="need_update">
            {!! sizeof($need_update) !!} issues need solving <i class="fa fa-chevron-down" aria-hidden="true"></i>
        </div>
        <div class="panel-body" id="need_update">
            @foreach($need_update as $row)
            <div class="row mt-2">
                <div class="col-12">
                    <i class='fas fa-warning mr-2'></i>
                    <a href="/customer/{!! $row['lead']->id !!}">
                        {!! $row['lead']->fullname !!} {!! $row['lead']->address->short() !!}
                    </a>
                    {!! $row['reason'] !!}
                </div>
            </div>
            @endforeach
        </div>
    @endif

    @if(!empty(auth()->user()->staff))
        @if(empty(auth()->user()->staff->todaysWorklog()))
            <a class="mt-2" style="display:inline-block;" href="/staff/worklog/create">
                <i class='fas fa-warning mr-2'></i> Please click here to add to your worklog for today
            </a>
        @endif
    @endif

    <div class="card shadow mb-4 mt-3">
        <div class="card-header dark-bg light">
            Connection stats
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="row mt-1 text-center h" style="font-size: 1.2rem;">
                        <div class="col-4">Completed installs</div>
                        <div class="col-4">Live connections</div>
                        <div class="col-4">Offline connections</div>
                    </div>
                    <div class="row mb-3 text-center h">
                        <div class="col-4">{{ $stats['completed_installs'] }}</div>
                        <div class="col-4">{{ $stats['live_customers'] }}</div>
                        <div class="col-4">{{ $stats['installed_offline'] }}</div>
                    </div>
                </div>

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

    <div class="card shadow mt-3 mb-4">
        <div class="card-header" style="background-color: #e87204; color: #fff;">
            <strong>{!! sizeof($outstanding) !!} Tasks outstanding</strong>-
            <a class="mt-2 badge badge-pill badge-primary" href="/note/create?type=1">+ add task</a>
        </div>
        <div class="card-body">
        @foreach($outstanding as $note)
            <x-note
                :note="$note"
                incontext="0"
                editable="{{ ($note->currentAuthEditable()) }}"/>
        @endforeach
        </div>
    </div>

    <div class="card shadow mt-3 mb-4">
        <div class="card-header bg-warning">
            <i class='fas fa-calendar-alt mr-2'></i>
            <strong>Feed</strong>-
            Latest notes added - <a class="mt-2" href="/note">View full feed</a>
            - <a class="mt-2 badge badge-pill badge-primary" href="/note/create">+ add note</a>
        </div>
        <div class="card-body">
        @foreach($notes as $note)
            <x-note
                :note="$note"
                incontext="0"
                editable="{{ ($note->currentAuthEditable()) }}"/>
        @endforeach
            <br />
            <a class="mt-2" href="/note">View full feed</a>
        </div>
    </div>

    <div class="card shadow mt-3 mb-4">
        <div class="card-header bg-warning">
            <i class='fas fa-calendar-alt mr-2'></i>
            <strong>Schedule </strong>-
            Appointments in the next 5 days - <a class="mt-2" href="/staff/schedule">View full schedule</a>
            - <a class="mt-2 badge badge-pill badge-primary" href="/appointment">+ add to schedule</a>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <table>
                        <tr>
                            <td>Days behind</td>
                            <td colspan="2"><input type="number" value="0" id="days-behind" /></td>
                        </tr>
                        <tr>
                            <td>Days ahead</td>
                            <td><input type="number" value="5" id="days-ahead" /></td>
                            <td>
                                <button type="button" class="refresh-schedule"
                                    data-showdayhours="false">
                                    Refresh
                                </button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div id="day-time-scale">

                    </div>
                    <div id="staff-schedule">

                    </div>
                </div>
            </div>
            <br />
            <a class="mt-2" href="/staff/schedule">View full schedule</a>
        </div>
    </div>

    @if(auth()->user() && auth()->user()->isPermitted("director"))
        @endif
</div>

@endsection

@section('script')
    <script>
        $( document ).ready(function() {
            refreshSchedule(false);
        });
    </script>
    @include('staff.schedule.script')
@endsection