@extends('operations.layout.mainlayout')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Dashboard </h1>
                </div><!-- /.col -->
                <div class="col-sm-6">

                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>

                                <button type="button" class="btn btn-tool" data-card-widget="remove">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="text-center">
                                        <strong>Burn Rate - Last week sales count (<span style="color:#aaaeb5">Ready samples</span> vs <span style="color:var(--blazma-primary)">Collected Samples</span>)</strong>
                                    </p>

                                    <div class="chart">
                                        <!-- Sales Chart Canvas -->
                                        <canvas id="salesChart" height="180" style="height: 180px;"></canvas>
                                    </div>
                                    <!-- /.chart-responsive -->
                                </div>
                                <!-- /.col -->
                                <div class="col-md-6">
                                    <p class="text-center">
                                        <strong>Today's Sample Status</strong>
                                    </p>

                                    <div class="progress-group">
                                        Samples in Collection
                                        <span class="float-right"><b>{{$collection_samples}}</b>/{{$total_samples}}</span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-success" style="width: {{$total_samples == 0 ? 0 : (($collection_samples/$total_samples) * 100)}}%"></div>
                                        </div>
                                    </div>
                                    <!-- /.progress-group -->

                                    <div class="progress-group">
                                        Samples in Outsourcing
                                        <span class="float-right"><b>{{$outsourcing_samples}}</b>/{{$total_samples}}</span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-secondary" style="width: {{$total_samples == 0 ? 0 : (($outsourcing_samples/$total_samples) * 100)}}%"></div>
                                        </div>
                                    </div>

                                    <!-- /.progress-group -->
                                    <div class="progress-group">
                                        <span class="progress-text">Samples in Receiving</span>
                                        <span class="float-right"><b><b>{{$receiving_samples}}</b>/{{$total_samples}}</span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-danger" style="width: {{$total_samples == 0 ? 0 : (($receiving_samples/$total_samples) * 100)}}%"></div>
                                        </div>
                                    </div>

                                    <!-- /.progress-group -->
                                    <div class="progress-group">
                                        Ready Samples
                                        <span class="float-right"><b>{{$ready_samples}}</b>/{{$total_samples}}</span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-dark" style="width: {{$total_samples == 0 ? 0 : (($ready_samples/$total_samples) * 100)}}%"></div>
                                        </div>
                                    </div>
                                    <!-- /.progress-group -->
                                </div>
                                <!-- /.col -->
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- ./card-body -->
                        <div class="card-footer">

                            <!-- /.row -->
                        </div>
                        <!-- /.card-footer -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <div class="row">
                <div class="col-lg-7">
                    <div class="card">
                        <div class="card-header border-0">
                            <div class="d-flex justify-content-between">
                                <h3 class="card-title">Last week (<span style="color:var(--blazma-text)">Positive</span> vs <span style="color:#aaaeb5">Negative</span>)</h3>
                            </div>
                        </div>
                        <div class="card-body">

                            <!-- /.d-flex -->

                            <div class="position-relative mb-4">
                                <canvas id="visitors-chart" height="200"></canvas>
                            </div>

                        </div>
                    </div>
                    <!-- /.card -->
                    <!-- /.card -->
                </div>
                <!-- /.col-md-6 -->
                <div class="col-md-3">
                    <h5>Today Sales by Branch</h5>
                    <div class="chart-responsive">
                        <canvas id="pieChart" height="150"></canvas>
                    </div>
                    <!-- ./chart-responsive -->
                </div>
                <!-- /.col -->
                <div class="col-md-2"><br /><br />
                    <ul class="chart-legend clearfix">
                        @foreach($orders as $eorder)
                            <li><i class="far fa-circle" style="color: {{$eorder->COLOR}}"></i> {{$eorder->NAME_EN}}</li>
                        @endforeach
                    </ul>
                </div>
                <!-- /.col-md-6 -->
            </div>

            <div class="row">
                <div class="col-md-5">
                    <!-- /.card -->

                    <div class="card">
                        <div class="card-header border-0">
                            <h3 class="card-title">Top 5 Companies</h3>
                            <div class="card-tools">
                                <a href="#" class="btn btn-tool btn-sm">
                                    <i class="fas fa-download"></i>
                                </a>
                                <a href="#" class="btn btn-tool btn-sm">
                                    <i class="fas fa-bars"></i>
                                </a>
                            </div>
                        </div>
                        <div class="card-body table-responsive p-0">
                            <table class="table table-striped table-valign-middle">
                                <thead>
                                <tr>
                                    <th>Company</th>
                                    <th>Qty</th>
                                    <th>Net Total</th>
                                    <th>Paid Total</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($companies as $company)
                                <tr>
                                    <td>{{$company->COMPANY_NAME}}{{!empty($company->CLIENT_CODE)?' ('.$company->CLIENT_CODE.')':''}}</td>
                                    <td>{{$company->TOTAL_QTY}}</td>
                                    <td>{{$company->TOTAL_PRICE}}</td>
                                    <td>{{$company->TOTAL_AMOUNT / 100}}</td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col-md-6 -->
                <div class="col-md-5">
                    <!-- /.card -->

                    <div class="card">
                        <div class="card-header border-0">
                            <h3 class="card-title">Top 5 Medical Complexes</h3>
                            <div class="card-tools">
                                <a href="#" class="btn btn-tool btn-sm">
                                    <i class="fas fa-download"></i>
                                </a>
                                <a href="#" class="btn btn-tool btn-sm">
                                    <i class="fas fa-bars"></i>
                                </a>
                            </div>
                        </div>
                        <div class="card-body table-responsive p-0">
                            <table class="table table-striped table-valign-middle">
                                <thead>
                                <tr>
                                    <th>Medical Complex</th>
                                    <th>Qty</th>
                                    <th>Net Total</th>
                                    <th>Paid Total</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($medical_complexes as $medical_complex)
                                    <tr>
                                        <td>{{$medical_complex->COMPANY_NAME}}</td>
                                        <td>{{$medical_complex->TOTAL_QTY}}</td>
                                        <td>{{$medical_complex->TOTAL_PRICE}}</td>
                                        <td>{{$medical_complex->TOTAL_AMOUNT / 100}}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.col-md-6 -->
                <div class="col-md-2">
                    <div class="card">
                        <div class="card-header border-0">
                            <h3 class="card-title">Top 5 Nationalities</h3>
                            <div class="card-tools">
                                <a href="#" class="btn btn-tool btn-sm">
                                    <i class="fas fa-download"></i>
                                </a>
                                <a href="#" class="btn btn-tool btn-sm">
                                    <i class="fas fa-bars"></i>
                                </a>
                            </div>
                        </div>
                        <div class="card-body table-responsive p-0">
                            <table class="table table-striped table-valign-middle">
                                <thead>
                                <tr>
                                    <th>Nationality</th>
                                    <th>Qty</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($nationalities as $nationality)
                                    <tr>
                                        <td>
                                            {{$nationality->name}}
                                        </td>
                                        <td>
                                            {{$nationality->status_count}}
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->

            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

@endsection