@extends('layouts.app')


@section('content')
    <div class="card">
        <div class="card-body">
            @if(Auth::user()->role_id == 1)
                @if(!$isSessionCreated)
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#startSessionModal">
                        Start Session
                    </button>
                @else
                    <div class="d-flex border px-2 py-2">
                        <h4 class="text-muted my-auto mr-1"><i class="far fa-clock"></i></h4>
                        <h6 class="text-muted my-auto ml-1">{{ $today }}</h6>
                        <h6 class="text-muted my-auto ml-auto">Session has been started</h6>
                    </div>
                @endif

                <h5 class="mt-4">Orders</h5>
                <hr>
                <ul class="row dashboard-top list-unstyled">
                    <li class="col-12 col-md-4">
                        <div class="card">
                            <div class="card-body text-center">
                                <h6>Picked</h6>
                                <h4>0</h4>
                            </div>
                        </div>
                    </li>
                    <li class="col-12 col-md-4">
                        <div class="card">
                            <div class="card-body text-center">
                                <h6>Boxed</h6>
                                <h4>0</h4>
                            </div>
                        </div>
                    </li>
                    <li class="col-12 col-md-4">
                        <div class="card">
                            <div class="card-body text-center">
                                <h6>Booked</h6>
                                <h4>0</h4>
                            </div>
                        </div>
                    </li>
                </ul>
            @endif
        </div>
    </div>

    <div class="modal fade" id="startSessionModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <form action="{{ route('session.store') }}" method="POST">
                        @csrf
                        <h5>How many employees are available today?</h5>
                        <ul class="list-unstyled mt-3">
                            @foreach($pickers as $key => $picker)
                                <li class="my-3 d-flex">
                                    <img src="{{ asset('profile_pictures/'.$picker->profile_picture) }}" class="mr-3" style="width: 50px; border-radius: 100px;">
                                    <div class="my-auto">{{ $picker->name }}</div>
                                    <input type="checkbox" name="picker[]" class="ml-auto my-auto" value="{{ $picker->id }}">
                                </li>
                            @endforeach
                        </ul>
                        <hr>
                        <button type="submit" class="btn btn-primary btn-sm">Start</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script') 

@endsection