@extends('admin.layouts.app')

@section('title', 'Reporting')

@section('content_header')
    <h1>Reporting</h1>
@stop

@section('content')
    @component('components.card', ['title' => 'Snooker Reporting'])
    <form method="POST" action="{{ route('admin.reporting.sales') }}" class="mb-3">
        @csrf
        <div class="align-items-end row">
            <div class="col-md-2">
                <label>Select Year</label>
                <select id="month_selector" class="form-control" name="year">
                    @foreach ($years as $year)
                    <option value="{{ $year }}" {{ (isset($y) && $year == (int)$y) ? 'selected' : '' }}>{{ $year }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label>Select Month</label>
                <select id="month_selector" class="form-control" name="month">
                    @foreach ($months as $name => $mth_num)
                    <option value="{{ $mth_num }}" {{ (isset($m) && $mth_num == (int)$m) ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label>Select Date</label>
                <select id="month_selector" class="form-control" name="day">
                    <option value="">---All---</option>
                    @php
                        $day = 1;
                    @endphp
                    @while ($day <= $total_days)
                    <option value="{{ $day }}" {{ (isset($d) && $day == (int)$d) ? 'selected' : '' }}>{{ $day }}</option>
                    @php
                        $day++
                    @endphp
                    @endwhile
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary mt-4">Filter</button>
            </div>
        </div>
    </form>

{{--     <div>
        <canvas id="attendance_chart"></canvas>
    </div> --}}

    <div class="d-flex justify-content-around my-4">
        <div class="card">
            <div class="card-body" id="tot_cash_transaction">
            </div>
          </div>
        <div class="card">
            <div class="card-body" id="tot_credit_transaction">
            </div>
          </div>
        <div class="card">
            <div class="card-body" id="tot_transaction">
            </div>
        </div>
    </div>

    <table class="table table-hover datatable">
        <thead>
          <tr>
            <th scope="col" width="5%">#</th>
            <th scope="col" width="15%">Transaction Date</th>
            <th scope="col" width="20%">Marker</th>
            <th scope="col" width="20%">Customer</th>
            <th scope="col" width="10%">Table</th>
            <th scope="col" width="15%">Payment Type</th>
            <th scope="col" width="5%">Discount</th>
            <th scope="col" width="20%">Total</th>
          </tr>
        </thead>
        <tbody>
            @php
                $tot_cash_transactions = $tot_cr_transactions = 0;
            @endphp
            @forelse ($transactions_y_m as $key => $transaction)
            <tr>
              <th scope="row">{{ ++$key }}</th>
              <td>{{ $transaction->date }}</td>
              <td>{{ $transaction->marker->name }}</td>
              <td>{{ $transaction->customer ? $transaction->customer->name : 'N/A' }}</td>
              <td>{{ $transaction->timer->table->name }}</td>
              <td>{{ payment_stat($transaction->payment_type) }}</td>
              @php
                  if ($transaction->payment_type == \App\Models\TableTransaction::PAYMENT_TYPE_CASH) {
                    $tot_cash_transactions += ($transaction->total);
                }elseif ($transaction->payment_type == \App\Models\TableTransaction::PAYMENT_TYPE_CREDIT) {
                      $tot_cr_transactions += ($transaction->total);
                }
              @endphp
              <td>Nrs {{ $transaction->discount }}</td>
              <td>Nrs {{ $transaction->total }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="text-center">No Transaction Found</td>
            </tr>
            @endforelse
        </tbody>
{{--         <caption>
            <div>
                Total Cash Transaction : <span>Nrs {{ $tot_cash_transactions }}</span>
            </div>
            <div>
                Total Credit Transaction : <span>Nrs {{ $tot_cr_transactions }}</span>
            </div>
        </caption> --}}
      </table>
    @endcomponent
@stop

@section('css')

@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(() => {
        const ctx = document.getElementById('attendance_chart');
        const tot_cash_transaction = document.getElementById('tot_cash_transaction');
        const tot_credit_transaction = document.getElementById('tot_credit_transaction');
        const tot_transaction = document.getElementById('tot_transaction');

        tot_cash_transaction.innerHTML = 'Total Cash : Nrs {{ $tot_cash_transactions }}';
        tot_credit_transaction.innerHTML = 'Total Credit : Nrs {{ $tot_cr_transactions }}';
        tot_transaction.innerHTML = 'Total : Nrs {{ $tot_cash_transactions + $tot_cr_transactions }}';

  /*       const labels = @JSON($labels);

        const datasets = @JSON($datasets);

         const workTrendsChart = new Chart(ctx, {
          type: 'bar',
          data: {labels,datasets},
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              y: {
                beginAtZero: true,
                max:{{ $tot_sales_Y_m }}
              }
            },
            plugins: {
              legend: {
                position: 'top'
              },
              tooltip: {
                mode: 'index',
                intersect: false
              }
            }
          }
        }); */
        var table = $('.datatable').DataTable();
    });

</script>
@stop