@extends('layouts.user_type.auth')

@section('content')
  <div class="row">
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
      <div class="card">
        <div class="card-body p-3">
          <div class="row">
            <div class="col-8">
              <div class="numbers">
              <p class="text-sm mb-0 text-capitalize font-weight-bold">Total Tourist</p>
              <h5 class="font-weight-bolder mb-0">
                  {{ $total }}
                  <span class="text-success text-sm font-weight-bolder"> Total</span>
              </h5>
              </div>
            </div>
            <div class="col-4 text-end">
              <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @php
        $isadmin = auth()->user()->role === 'Admin';
    @endphp
    @if($isadmin)
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
      <div class="card">
        <div class="card-body p-3">
          <div class="row">
            <div class="col-8">
              <div class="numbers">
                <p class="text-sm mb-0 text-capitalize font-weight-bold">Number Of Staff</p>
                <h5 class="font-weight-bolder mb-0">
                  {{ $staff }}
                  <span class="text-success text-sm font-weight-bolder">Total</span>
                </h5>
              </div>
            </div>
            <div class="col-4 text-end">
              <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @else
    @endif
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
      <div class="card">
          <div class="card-body p-3">
              <div class="row">
                  <div class="col-8">
                      <div class="numbers">
                          <p class="text-sm mb-0 text-capitalize font-weight-bold">Number Female</p>
                          <h5 class="font-weight-bolder mb-0">
                              {{ $femaleCount }}
                              <span class="text-success text-sm font-weight-bolder">Total</span>
                          </h5>
                      </div>
                  </div>
                  <div class="col-4 text-end">
                      <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                          <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
      <div class="card">
          <div class="card-body p-3">
              <div class="row">
                  <div class="col-8">
                      <div class="numbers">
                          <p class="text-sm mb-0 text-capitalize font-weight-bold">Number Male</p>
                          <h5 class="font-weight-bolder mb-0">
                              {{ $maleCount }}
                              <span class="text-success text-sm font-weight-bolder">Total</span>
                          </h5>
                      </div>
                  </div>
                  <div class="col-4 text-end">
                      <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                          <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="row mt-4">
    <div class="col-lg-5 mb-lg-0 mb-4">
    </div>
  </div>
<div class="container-fluid">
    <div class="row">
        <!-- Chart -->
        <div class="col-lg-7">
            <div class="card z-index-2">
                <div class="card-header pb-0">
                    <h6>Tourist Overview</h6>
                    <p class="text-sm">
                        <i class="fa fa-arrow-up text-success"></i>
                        <span class="font-weight-bold">10% more</span> {{ $currentYear }}
                    </p>
                </div>
                <div class="card-body p-3">
                    <div class="chart">
                        <canvas id="touristChart" width="400" height="400"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <!-- Table -->
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="row">
                        <div class="col-lg-6 col-7">
                            <h6>Tourist</h6>
                            <p class="text-sm mb-0">
                                <i class="fa fa-check text-info" aria-hidden="true"></i>
                                <span class="font-weight-bold ms-1">this month</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Address</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Male</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Female</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                              @foreach($allTourist as $tourist)
                              <tr>
                                <td class="ps-4">
                                    <p class="text-xs font-weight-bold mb-0" style="text-align: left;">{{ $tourist->address }}</p>
                                </td>
                                <td class="text-center">
                                    <p class="text-xs font-weight-bold mb-0" style="text-align: left;">{{ $tourist->male_count }}</p>
                                </td>
                                <td class="text-center">
                                    <p class="text-xs font-weight-bold mb-0" style="text-align: left;">{{ $tourist->female_count }}</p>
                                </td>
                                <td class="text-center">
                                    <p class="text-xs font-weight-bold mb-0" style="text-align: left;">{{ $tourist->total_count }}</p>
                                </td>
                              </tr>
                              @endforeach
                              <tr>
                                <td class="text-center">
                                    <p class="text-xs font-weight-bold mb-0" style="text-align: left;">Total Tourist : {{ $total }}</p>
                                </td>
                              </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
@endsection
@push('dashboard')
<script src="{{ asset('js/jquery-3.7.1.min.js') }}" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
    window.onload = function() {
        var ctx = document.getElementById("touristChart").getContext("2d");

        var months = {!! json_encode($monthlyData->pluck('month')) !!};
        var femaleData = {!! json_encode($monthlyData->pluck('female_total')) !!};
        var maleData = {!! json_encode($monthlyData->pluck('male_total')) !!};

        var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 400);
        gradientStroke1.addColorStop(0, 'rgba(203, 12, 159, 0.2)');
        gradientStroke1.addColorStop(1, 'rgba(203, 12, 159, 1)');

        var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 400);
        gradientStroke2.addColorStop(0, 'rgba(58, 65, 111, 0.2)');
        gradientStroke2.addColorStop(1, 'rgba(58, 65, 111, 1)');
 
        var myChart = new Chart(ctx, {
            type: "line",
            data: {
                labels: months,
                datasets: [{
                  label: "Female",
                  tension: 0.4,
                  borderWidth: 3,
                  backgroundColor: gradientStroke1,
                  fill: true,
                  data: femaleData,
                  maxBarThickness: 6
                },
                {
                  label: "Male",
                  tension: 0.4,
                  borderWidth: 3,
                  backgroundColor: gradientStroke2,
                  fill: true,
                  data: maleData,
                  maxBarThickness: 6
                },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#b2b9bf',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            color: '#b2b9bf',
                            padding: 20,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
    }
</script>
@endpush