@extends('admin.layouts.dashboard')

@section('title', 'Date Range Transactions')

@section('content')
    @php
        $sdt = $start_dt ?? date('d-m-Y');
        $edt = $end_dt ?? date('d-m-Y');
        $ttl_subs = 0;
        $ttl_paid = 0;
    @endphp

    <x-page-header
        title="Transaction Summary"
        description="Subscriptions raised and payments collected, day by day."
        :breadcrumbs="['Dashboard' => url('/dashboard'), 'Reports' => null, 'Date range transactions' => null]"
    />

    <x-card title="Filter" class="u-mb-6">
        <form method="POST" action="{{ url('/transactionreport') }}" class="filter-bar">
            @csrf
            <x-field label="Date range" name="start">
                <div class="input-group input-daterange">
                    <input type="text" id="start" class="input date-picker" name="start"
                           data-date-format="dd-mm-yyyy" value="{{ $sdt }}" readonly
                           aria-label="Start date">
                    <span class="input-group__addon" aria-hidden="true"><i class="fa-solid fa-arrow-right-arrow-left"></i></span>
                    <input type="text" class="input date-picker" name="end"
                           data-date-format="dd-mm-yyyy" value="{{ $edt }}" readonly
                           aria-label="End date">
                </div>
            </x-field>

            <div class="filter-bar__actions">
                <button type="submit" class="btn btn--primary">
                    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                    Run report
                </button>
            </div>
        </form>
    </x-card>

    <div id="display">
        <x-card
            title="Transaction summary"
            :subtitle="$sdt.' to '.$edt"
            :flush="true"
        >
            <x-slot:actions>
                <button type="button" class="btn btn--secondary btn--sm no-print" onclick="printPageArea('display')">
                    <i class="fa-solid fa-print" aria-hidden="true"></i>
                    Print
                </button>
            </x-slot:actions>

            @if (count($transaction_details) === 0)
                <x-empty icon="fa-calendar-days" title="No days in this range" />
            @else
                <div class="table-wrap">
                    <table class="table table--striped">
                        <thead>
                            <tr>
                                <th scope="col" class="col-num">SL</th>
                                <th scope="col">Date</th>
                                <th scope="col" class="u-text-right">Subscription</th>
                                <th scope="col" class="u-text-right">Paid</th>
                                <th scope="col">Remark</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($transaction_details as $i => $att)
                                @php
                                    $ttl_subs += $att->ttl_amt;
                                    $ttl_paid += $att->ttl_paid;
                                @endphp
                                <tr>
                                    <td class="col-num">{{ $i + 1 }}</td>
                                    <td class="u-nowrap">{{ date('d-m-Y', strtotime($att->calendar_date)) }}</td>
                                    <td class="u-numeric">{{ $att->ttl_amt }}</td>
                                    <td class="u-numeric">{{ $att->ttl_paid }}</td>
                                    <td></td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th scope="row" colspan="2">Total</th>
                                <td class="u-numeric">{{ number_format($ttl_subs, 2) }}</td>
                                <td class="u-numeric">{{ number_format($ttl_paid, 2) }}</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            @endif
        </x-card>
    </div>
@endsection