@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.marker') }}">
        @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-3">
                <label>Select Marker</label>
                <select id="customer_selector" class="form-control select2" name="marker_id">
                    <option value="">---All---</option>
                    {{-- <option></option> --}}
                    @foreach ($markers as $marker)
                    <option value="{{ $marker->id }}" {{ (isset($mkr) && $marker->id == $mkr) ? 'selected' : '' }}>{{ $marker->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-1">
                <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 datatable">
        <h5 class="text-center my-3">Transactions of Month({{ $mth_name }})</h5>
        <thead>
            <tr>
                <th scope="col" width="5%">Sn</th>
                <th scope="col" width="20%">Marker</th>
                <th scope="col" width="20%">Table Name(Served)</th>
                <th scope="col" width="25%">Cash Transactions</th>
                <th scope="col" width="25%">Cr. Transactions</th>
                <th scope="col" width="5%">Discount</th>
            </tr>
        </thead>
        <tbody>
            @php
            $tot_cash_transactions = $tot_cr_transactions = 0;
        @endphp
        @forelse ($transactions_y_m as $k => $transaction)
            @php
                $transaction_cash_amount = $transaction_cr_amount = 0;
                if ($transaction->payment_type == \App\Models\TableTransaction::PAYMENT_TYPE_CASH) {
                    $transaction_cash_amount = $transaction->total;
                    $tot_cash_transactions += $transaction_cash_amount;
                } elseif ($transaction->payment_type == \App\Models\TableTransaction::PAYMENT_TYPE_CREDIT) {
                    $transaction_cr_amount = $transaction->total;
                    $tot_cr_transactions += $transaction_cr_amount;
                }
            @endphp
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $transaction->marker->name }}</td>
                <td>{{ $transaction->snooker_table->name }}</td>
                <td>Nrs {{ $transaction_cash_amount ? $transaction_cash_amount : 0 }}</td>
                <td>Nrs {{ $transaction_cr_amount ? $transaction_cr_amount : 0 }}</td>
                <td>Nrs {{ $transaction->discount }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="6" class="text-center">No transactions 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 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 ctx = document.getElementById('attendance_chart');

        const label = ['{{ $mth_name }}'];
        const y_max = 100;

        const debit_transaction = '{{ $debit_transaction }}';
        const credit_transaction = '{{ $credit_transaction }}';
        const total_transaction = '{{ $total_transaction }}';

        const dataset = [
            {"label":"Debit Transactions","data":[(debit_transaction/total_transaction)*y_max],"borderColor":"#abebc6","backgroundColor":"#abebc6"},
            {"label":"Credit Transactions","data":[(credit_transaction/total_transaction)*y_max],"borderColor":"#f5b7b1","backgroundColor":"#f5b7b1"},
        ];
        const workTrendsChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: label,
            datasets: dataset
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              y: {
                beginAtZero: true,
                max:y_max
              }
            },
            plugins: {
              legend: {
                position: 'top'
              },
              tooltip: {
                mode: 'index',
                intersect: false
              }
            }
          }
        });

        var table = $('.datatable').DataTable();

    });
  </script>
@stop