@extends('layout.layout')
@section('title','Work Overview')
@section('work_overview','active')
@section('layout.css')
    <link rel="stylesheet" href="{{ asset('/app/css/chart.css')}}">
@endsection
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <h5>Work Overview</h5>
                </div>
            </div>

            <div class="callout callout-info mt-2">
                <form id="form-chart">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Resource</label>
                                <select class="form-control select2" name="resource_id"
                                        style="width: 100%;">
                                    @foreach($resources as $resourceList)
                                        <option value="{{$resourceList->id}}" {{$resourceList->id == Auth::id() ? 'selected' : ''}}>
                                            {{$resourceList->firstname.' '.$resourceList->lastname}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label>Start Date</label>
                            <input type="date" class="form-control" name="start_date" id="start_date"
                                   value="2025-08-01"
                                   required>
                        </div>
                        <div class="col-md-3">
                            <label>End Date</label>
                            <input type="date" class="form-control" name="end_date" id="end_date"
                                   value="2025-08-21"
                                   required>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-md-12">
                         <button class="btn btn-sm btn-primary" id="submit_button">
                            <div class="spinner-border spinner-border-sm" role="status"
                                 id="button_spinner"
                                 style="display: none">
                                <span class="sr-only">Loading...</span>
                            </div>
                               <i class="fas fa-search mr-1"></i> Search
                       </button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-cyan">
                        <div class="card-header">
                            <i class="fa fa-clock mr-1"></i> Data Hours Comparison
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="barChart"
                                        style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-cyan">
                        <div class="card-header">
                            <i class="fa fa-handshake mr-1"></i> Entity Sharing
                        </div>
                        <div class="card-body">
                            <canvas id="pieChart"
                                    style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-cyan">
                        <div class="card-header">
                            <i class="fa fa-credit-card mr-1"></i> Deliveries by Ticket Type
                        </div>
                        <div class="card-body">
                            <canvas id="donutChart"
                                    style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">

        </div>
    </section>
@endsection
@section('scripts')
    <script src="{{ asset('/app/js/charts.js') }}"></script>
@endsection