@extends('layouts.app')

@section('content')
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-11 col-sm-11 col-xs-11 mt-3">
      <div class="card">
        <div class="card-body">
          <!-- Chart -->
          <div class="row justify-content-center">
            <div class="col-md-6 col-sm-12 col-xs-12 mt-3">
              <div class="display-flex align-item-center justify-content-center heigth-250 text-center analysis-box" onclick="window.location.href = '{{ route('frontend.data-analysis-patients-monthly') }}'" style="background: #8b4f80;"> จำนวนผู้ป่วยด้วยโรคไข้เลือดออกรายเดือน จังหวัดพังงา </div>
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12 mt-3">
              <div class="display-flex align-item-center justify-content-center heigth-250 text-center analysis-box" onclick="window.location.href = '{{ route('frontend.data-analysis-sick-rate') }}'" style="background: #5faace;"> อัตราป่วยโรคไข้เลือดออก </div>
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12 mt-3">
              <div class="display-flex align-item-center justify-content-center heigth-250 text-center analysis-box" onclick="window.location.href = '{{ route('frontend.data-analysis-death-rate') }}'" style="background: #e97a7a;"> อัตราตายโรคไข้เลือดออก </div>
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12 mt-3">
              <div class="display-flex align-item-center justify-content-center heigth-250 text-center analysis-box" onclick="window.location.href = '{{ route('frontend.data-analysis-proportion') }}'" style="background: #62a772;"> สัดส่วนโรคไข้เลือดออก (DF/DHF/DSS) </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('styles')
  <style type="text/css">
    @media only screen and (max-width: 767px) {
      .heigth-250{
        height: 120px !important;
      }
    }
  </style>
@endsection