@extends('layouts.admin')

@section('content')
<div class="container-fluid p-0">

    <div class="row mb-2 mb-xl-3">
      <div class="col-auto d-none d-sm-block">
        <h3>Dashboard</h3>
      </div>

      <div class="col-auto ms-auto text-end mt-n1">

        <div class="dropdown me-2 d-inline-block position-relative">
          <a class="btn btn-light bg-white shadow-sm dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-display="static">
              <i class="align-middle mt-n1" data-feather="calendar"></i> Today
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <h6 class="dropdown-header">Settings</h6>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
          </div>
        </div>

        <button class="btn btn-primary shadow-sm">
        <i class="align-middle" data-feather="filter">&nbsp;</i>
        </button>
        <button class="btn btn-primary shadow-sm">
        <i class="align-middle" data-feather="refresh-cw">&nbsp;</i>
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-sm-6 col-xxl-3 d-flex">
        <div class="card illustration flex-fill">
          <div class="card-body p-0 d-flex flex-fill">
            <div class="row g-0 w-100">
              <div class="col-6">
                <div class="illustration-text p-3 m-1">
                  <h4 class="illustration-text">Welcome Back, {{ auth()->guard('admin')->user()->name }}!</h4>
                  <p class="mb-0">Doniebes Dashboard</p>
                </div>
              </div>
              <div class="col-6 align-self-end text-end">
                <img src="{{ asset('appstack/img/illustrations/customer-support.png') }}" alt="Customer Support" class="img-fluid illustration-img">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xxl-3 d-flex">
        <div class="card flex-fill">
          <div class="card-body py-4">
            <div class="d-flex align-items-start">
              <div class="flex-grow-1">
                <h3 class="mb-2">$ 24.300</h3>
                <p class="mb-2">Total Earnings</p>
                <div class="mb-0">
                  <span class="badge badge-soft-success me-2"> +5.35% </span>
                  <span class="text-muted">Since last week</span>
                </div>
              </div>
              <div class="d-inline-block ms-3">
                <div class="stat">
                  <i class="align-middle text-success" data-feather="dollar-sign"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xxl-3 d-flex">
        <div class="card flex-fill">
          <div class="card-body py-4">
            <div class="d-flex align-items-start">
              <div class="flex-grow-1">
                <h3 class="mb-2">{{ count($inboxs) }}</h3>
                <p class="mb-2">Inbox</p>
                <div class="mb-0">
                  <span class="badge badge-soft-danger me-2"> -4.25% </span>
                  <span class="text-muted">Since last week</span>
                </div>
              </div>
              <div class="d-inline-block ms-3">
                <div class="stat">
                  <i class="align-middle text-danger" data-feather="mail"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-xxl-3 d-flex">
        <div class="card flex-fill">
          <div class="card-body py-4">
            <div class="d-flex align-items-start">
              <div class="flex-grow-1">
                <h3 class="mb-2">$ 18.700</h3>
                <p class="mb-2">Total Revenue</p>
                <div class="mb-0">
                  <span class="badge badge-soft-success me-2"> +8.65% </span>
                  <span class="text-muted">Since last week</span>
                </div>
              </div>
              <div class="d-inline-block ms-3">
                <div class="stat">
                  <i class="align-middle text-info" data-feather="dollar-sign"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-lg-8 d-flex">
        <div class="card flex-fill w-100">
          <div class="card-header">
            <div class="card-actions float-end">
              <div class="dropdown position-relative">
                <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                    <i class="align-middle" data-feather="more-horizontal"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
            </div>
            <h5 class="card-title mb-0">Sales / Revenue</h5>
          </div>
          <div class="card-body d-flex w-100">
            <div class="align-self-center chart chart-lg">
              <canvas id="chartjs-dashboard-bar"></canvas>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4 d-flex">
        <div class="card flex-fill w-100">
          <div class="card-header">
            <span class="badge bg-info float-end">Today</span>
            <h5 class="card-title mb-0">Daily opinions</h5>
          </div>
          <div class="card-body">
            @foreach($opinions as $opinion)
            <div class="d-flex align-items-start">
              <img src="{{ asset('storage/'.$opinion->photo) }}" width="36" height="36" class="rounded-circle me-2" alt="Ashley Briggs">
              <div class="flex-grow-1">
                <small class="float-end">5m ago</small>
                <strong>{{ $opinion->name }}<br />
                <small class="text-muted">Today 7:51 pm</small><br />
                <div class="border text-sm text-muted p-2 mt-1">
                  {!! Str::limit($opinion->opini, 70) !!}
                </div>
              </div>
            </div>
            <hr />
            @endforeach
            
            <div class="d-grid">
              <a href="#" class="btn btn-primary">Load more</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-lg-6 col-xl-4 d-flex">
        <div class="card flex-fill">
          <div class="card-header">
            <div class="card-actions float-end">
              <div class="dropdown position-relative">
                <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                <i class="align-middle" data-feather="more-horizontal"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
            </div>
            <h5 class="card-title mb-0">Calendar</h5>
          </div>
          <div class="card-body d-flex">
            <div class="align-self-center w-100">
              <div class="chart">
                <div id="datetimepicker-dashboard"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-xl-4 d-none d-xl-flex">
        <div class="card flex-fill w-100">
          <div class="card-header">
            <div class="card-actions float-end">
              <div class="dropdown position-relative">
                <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                <i class="align-middle" data-feather="more-horizontal"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
            </div>
            <h5 class="card-title mb-0">Weekly sales</h5>
          </div>
          <div class="card-body d-flex">
            <div class="align-self-center w-100">
              <div class="py-3">
                <div class="chart chart-xs">
                  <canvas id="chartjs-dashboard-pie"></canvas>
                </div>
              </div>

              <table class="table mb-0">
                <thead>
                  <tr>
                    <th>Source</th>
                    <th class="text-end">Revenue</th>
                    <th class="text-end">Value</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><i class="fas fa-square-full text-primary"></i> Direct</td>
                    <td class="text-end">$ 2602</td>
                    <td class="text-end text-success">+43%</td>
                  </tr>
                  <tr>
                    <td><i class="fas fa-square-full text-warning"></i> Affiliate</td>
                    <td class="text-end">$ 1253</td>
                    <td class="text-end text-success">+13%</td>
                  </tr>
                  <tr>
                    <td><i class="fas fa-square-full text-danger"></i> E-mail</td>
                    <td class="text-end">$ 541</td>
                    <td class="text-end text-success">+24%</td>
                  </tr>
                  <tr>
                    <td><i class="fas fa-square-full text-dark"></i> Other</td>
                    <td class="text-end">$ 1465</td>
                    <td class="text-end text-success">+11%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 col-xl-4 d-flex">
        <div class="card flex-fill w-100">
          <div class="card-header">
            <div class="card-actions float-end">
              <div class="dropdown position-relative">
                <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
                                      <i class="align-middle" data-feather="more-horizontal"></i>
                                      </a>
                <div class="dropdown-menu dropdown-menu-end">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </div>
            </div>
            <h5 class="card-title mb-0">Faqs</h5>
          </div>
          <div class="card-body">
            <ul class="timeline">
              @foreach($faqs as $faq)
              <li class="timeline-item">
                <strong>{{ $faq->question }}</strong>
                <span class="float-end text-muted text-sm">30m ago</span>
                <p>{!! Str::limit($faq->answer,70) !!}</p>
              </li>
              @endforeach
              
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="card flex-fill">
      <div class="card-header">
        <div class="card-actions float-end">
          <div class="dropdown position-relative">
            <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
              <i class="align-middle" data-feather="more-horizontal"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </div>
        <h5 class="card-title mb-0">Latest Inboxs</h5>
      </div>
      <table id="datatables-dashboard-projects" class="table table-striped my-0">
        <thead>
          <tr>
            <th>Subject</th>
            <th class="d-none d-xl-table-cell">Message</th>
            <th class="d-none d-xl-table-cell">Date</th>
            <th>Status</th>
            <th class="d-none d-md-table-cell">From</th>
          </tr>
        </thead>
        <tbody>
          @foreach($inboxs as $inbox)
          <tr>
            <td>{{ Str::limit($inbox->subject, 15) }}</td>
            <td class="d-none d-xl-table-cell">{{ Str::limit($inbox->message_body,20) }}</td>
            <td class="d-none d-xl-table-cell">{{ Str::limit($inbox->message_time, 10) }}</td>
            <td><span class="badge {{ ($inbox->view_status==1) ? 'bg-info' : 'bg-warning' }}">{{ ($inbox->view_status==1) ? 'Read' : 'Unread' }}</span></td>
            <td class="d-none d-md-table-cell">{{ $inbox->from }}</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  @endsection