@extends('layouts.contentLayoutMaster')
{{-- page Title --}}
@section('title', 'Widgets')
{{-- vendor scripts --}}
@section('vendor-styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/charts/apexcharts.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/extensions/dragula.min.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/pickers/daterange/daterangepicker.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('vendors/css/extensions/swiper.min.css') }}">
@endsection
{{-- page styles --}}
@section('page-styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/widgets.css') }}">
@endsection
@section('content')
  <!-- Informações gerais -->
  <section id="widgets-Statistics">
    <div class="row">
      <div class="col-12 mt-1 mb-2">
        <h4>Estatística</h4>
        <hr>
      </div>
    </div>
    <div class="row">
      {{-- cirurgias em aberto --}}
      <div class="col-xl-2 col-md-4 col-sm-6">
        <div class="card text-center">
          <div class="card-content">
            <div class="card-body">
              <div class="badge-circle badge-circle-lg badge-circle-light-danger mx-auto my-1">
                <i class="bx bx-calendar-heart font-medium-5"></i>
              </div>
              <p class="text-muted mb-0 line-ellipsis">Cirurgias em Aberto</p>
              <h2 class="mb-0">{{ $surgeryCount }}</h2>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-2 col-md-4 col-sm-6">
        <div class="card text-center">
          <div class="card-content">
            <div class="card-body">
              <div class="badge-circle badge-circle-lg badge-circle-light-danger mx-auto my-1">
                <i class="bx bx-money font-medium-5"></i>
              </div>
              <p class="text-muted mb-0 line-ellipsis">Lançamentos em Aberto</p>
              <h2 class="mb-0">{{ $openLaunch }}</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-2 col-md-4 col-sm-6">
        <div class="card text-center">
          <div class="card-content">
            <div class="card-body">
              <div class="badge-circle badge-circle-lg badge-circle-light-primary mx-auto my-1">
                <i class="bx bx-calendar-heart font-medium-5"></i>
              </div>
              <p class="text-muted mb-0 line-ellipsis">Cirurgias Feitas</p>
              <h2 class="mb-0">{{ $finishSurgery }}</h2>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>
  {{-- fim das informações gerais --}}

  <section id="widgets-chart">
    <div class="row">
      <div class="col-12 mt-1 mb-2">
        <h4>Médicos</h4>
        <hr>
      </div>
    </div>
    <div class="row">
      <!-- Statistics Line Chart Starts -->
      <div class="col-lg-6">
        <div class="card">
          <div class="card-header border-bottom d-flex justify-content-between align-items-center">
            <h4 class="card-title">Repasse Médico</h4>
            <ul class="list-inline mb-0">
              <li class="mr-50"> <i class="bullet bullet-xs bullet-info mr-50"></i>Views</li>
              <li class="mr-1"> <i class="bullet bullet-xs bullet-success mr-50"></i>Likes </li>
              <li><i class="bx bx-dots-vertical-rounded font-medium-3 align-middle cursor-pointer"></i></li>
            </ul>
          </div>
          <div class="card-content">
            <div class="card-body">
              <div id="statistics-line-chart"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- Statistics Line Chart Ends -->

      <!-- Average Order Chart Starts -->
      <div class="col-lg-6">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">Receita x Despesa</h4>
            <div class="heading-elements">
              <div class="form-group position-relative has-icon-left w-75 ml-auto">
              </div>
            </div>
          </div>
          <div class="card-content">
            <div class="card-body">
              <div id="avg-order-chart"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- Average Order Chart Ends -->

    </div>
    <div class="row">
      <!-- Order Activity Chart Starts -->
      <div class="col-12">
        <div class="card widget-order-activity">
          <div class="card-header d-md-flex justify-content-between align-items-center">
            <h4 class="card-title">Order Activity</h4>
            <div class="header-right mt-md-0 mt-50">
              <fieldset class="d-inline-block form-group position-relative has-icon-left mb-50">
                <input type="text" class="form-control daterange">
                <div class="form-control-position">
                  <i class='bx bx-calendar'></i>
                </div>
              </fieldset>
              <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn active">Monthly</button>
                <button type="button" class="btn">Annually</button>
              </div>
            </div>
          </div>
          <div class="card-content">
            <div class="card-body">
              <div id="order-activity-line-chart"></div>
            </div>
          </div>
          <div class="card-footer border-top widget-order-activity-footer">
            <div class="row">
              <div class="col-md-3 col-sm-6">
                <div class="d-flex flex-column">
                  <span>Direct</span>
                  <div class="d-flex align-items-center">
                    <div class="badge-circle badge-circle-lg badge-circle-light-secondary flex-column mr-1">
                      <i class='bx bx-caret-up text-success font-medium-4'></i>
                      <small class="text-muted">+31%</small>
                    </div>
                    <h4 class="mb-0">$2,931</h4>
                  </div>
                  <small class="text-muted mt-1">Look Up In The Sky</small>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="d-flex flex-column">
                  <span>email</span>
                  <div class="d-flex align-items-center">
                    <div class="badge-circle badge-circle-lg badge-circle-light-secondary flex-column mr-1">
                      <i class='bx bx-caret-down text-danger font-medium-4'></i>
                      <small class="text-muted">-1%</small>
                    </div>
                    <h4 class="mb-0">$1,231</h4>
                  </div>
                  <small class="text-muted mt-1">Look Up In The Sky</small>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="d-flex flex-column">
                  <span>email</span>
                  <div class="d-flex align-items-center">
                    <div class="badge-circle badge-circle-lg badge-circle-light-secondary flex-column mr-1">
                      <i class='bx bx-caret-down text-danger font-medium-4'></i>
                      <small class="text-muted">-12%</small>
                    </div>
                    <h4 class="mb-0">$545</h4>
                  </div>
                  <small class="text-muted mt-1">Choose The Perfect</small>
                </div>
              </div>
              <div class="col-md-3 col-sm-6">
                <div class="d-flex flex-column">
                  <span>Other</span>
                  <div class="d-flex align-items-center">
                    <div class="badge-circle badge-circle-lg badge-circle-light-secondary flex-column mr-1">
                      <i class='bx bx-caret-up text-success font-medium-4'></i>
                      <small class="text-muted">+31%</small>
                    </div>
                    <h4 class="mb-0">$332</h4>
                  </div>
                  <small class="text-muted mt-1">How to Cook</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Order Activity Chart Ends -->
    </div>
  </section>
  <!-- Widgets Advance start -->
@endsection
{{-- vendor scripts --}}
@section('vendor-scripts')
  <script src="{{ asset('vendors/js/pickers/daterange/moment.min.js') }}"></script>
  <script src="{{ asset('vendors/js/pickers/daterange/daterangepicker.js') }}"></script>
  <script src="{{ asset('vendors/js/charts/apexcharts.min.js') }}"></script>
  <script src="{{ asset('vendors/js/extensions/dragula.min.js') }}"></script>
  <script src="{{ asset('vendors/js/extensions/swiper.min.js') }}"></script>
@endsection
{{-- page scripts --}}
@section('page-scripts')
  <script src="{{ asset('js/scripts/cards/widgets.js') }}"></script>
@endsection