@extends('layouts.app')
@section('title', __('Sales Payments Report'))

@section('content')

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">Sales Payments</h1>
</section>

<section class="content">
    <!-- Filters -->
    <div class="row card">
        <div class="col-md-6">
            <form action="{{ action([\App\Http\Controllers\ReportController::class, 'salesPayments']) }}" method="GET" class="form-inline mb-3">
                <div class="form-group mr-2">
                    <label for="start_date">@lang('Start Date'):</label>
                    <input type="date" name="start_date" class="form-control ml-2" 
                        value="{{ request()->start_date ?? \Carbon\Carbon::now()->subYear()->format('Y-m-d') }}">
                </div>
                <div class="form-group mr-2">
                    <label for="end_date">@lang('End Date'):</label>
                    <input type="date" name="end_date" class="form-control ml-2" 
                        value="{{ request()->end_date ?? \Carbon\Carbon::now()->format('Y-m-d') }}">
                </div>
                <button type="submit" class="btn btn-primary">@lang('Filter')</button>
            </form>
        </div>
        <div class="col-md-6">
            <a href="{{ action([\App\Http\Controllers\ReportController::class, 'salesPayments'], ['pdf' => 1, 'start_date' => request()->start_date, 'end_date' => request()->end_date]) }}" 
                class="btn btn-success float-right" 
                target="_blank">
                <i class="fa fa-file-pdf-o"></i> @lang('Download PDF')
            </a>
        </div>
    </div>

    <!-- Show Rows Dropdown -->
    <div class="row mb-3">
        <div class="col-md-2">
            <label for="rowCount">Show rows:</label>
            <select id="rowCount" class="form-control">
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100" selected>100</option>
                <option value="250">250</option>
                <option value="500">500</option>
                <option value="1000">1000</option>
                <option value="all">All</option>
            </select>
        </div>
    </div>

    <div class="card mt-3">
        <!-- Report Table -->
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>@lang('Invoice No')</th>
                        <th>@lang('Payment Mode')</th>
                        <th>@lang('Total')</th>
                        <th>@lang('Balance')</th>
                        <th>@lang('Paid Amount')</th>
                        <th>@lang('Credit')</th>
                        <th>@lang('Points')</th>
                        <th>@lang('Cr. Note')</th>
                        <th>@lang('Customer')</th>
                        <th>@lang('Date')</th>
                        <th>@lang('Location')</th>
                        <th>@lang('Sold By')</th>
                        <th>@lang('Status')</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transactions as $trx)
                        <tr>
                            <td>{{ $trx->invoice_no }}</td>
                            <td>{{ $trx->payment_method }}</td>
                            <td>{{ number_format($trx->final_total, 2) }}</td>
                            <td>{{ number_format($trx->balance, 2) }}</td>
                            <td>{{ number_format($trx->paid_amount, 2) }}</td>
                            <td>{{ number_format($trx->credit, 2) }}</td>
                            <td>{{ number_format($trx->points, 2) }}</td>
                            <td>{{ number_format($trx->credit_note, 2) }}</td>
                            <td>{{ $trx->customer }}<br> {{ $trx->mobile }}</td>
                            <td>{{ \Carbon\Carbon::parse($trx->created_at)->format('Y-m-d H:i') }}</td>
                            <td>{{ $trx->location }}</td>
                            <td>{{ \Illuminate\Support\Str::ucfirst($trx->sold_by) }}</td>
                            <td>{{ ucfirst($trx->payment_status) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="13" class="text-center">@lang('No data available')</td>
                        </tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="2" class="text-right">@lang('Totals')</th>
                        <th>{{ number_format($totals['final_total'], 2) }}</th>
                        <th>{{ number_format($totals['balance'], 2) }}</th>
                        <th>{{ number_format($totals['paid_amount'], 2) }}</th>
                        <th>{{ number_format($totals['credit'], 2) }}</th>
                        <th>{{ number_format($totals['points'], 2) }}</th>
                        <th>{{ number_format($totals['credit_note'], 2) }}</th>
                        <th colspan="5"></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</section>

<!-- Optional styling -->
<style>
    .row.mb-3 {
        margin-bottom: 20px;
    }

    select#rowCount {
        padding: 6px;
        font-size: 14px;
    }
</style>

<!-- Row count filtering -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const rowCountSelect = document.getElementById('rowCount');
        const tableBody = document.querySelector('table tbody');
        const allRows = tableBody.querySelectorAll('tr');

        function updateVisibleRows() {
            let selectedValue = rowCountSelect.value;
            let count = selectedValue === 'all' ? allRows.length : parseInt(selectedValue);

            allRows.forEach((row, index) => {
                row.style.display = index < count ? '' : 'none';
            });
        }

        updateVisibleRows();
        rowCountSelect.addEventListener('change', updateVisibleRows);
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const rowCountSelect = document.getElementById('rowCount');
        const tableBody = document.querySelector('table tbody');
        const allRows = tableBody.querySelectorAll('tr');

        function updateVisibleRows() {
            let selectedValue = rowCountSelect.value;
            let count = selectedValue === 'all' ? allRows.length : parseInt(selectedValue);
            allRows.forEach((row, index) => {
                row.style.display = index < count ? '' : 'none';
            });
        }

        updateVisibleRows();
        rowCountSelect.addEventListener('change', updateVisibleRows);

        // 🔁 Auto-submit filter form on first page load if no filters set
        const urlParams = new URLSearchParams(window.location.search);
        const hasStartDate = urlParams.has('start_date');
        const hasEndDate = urlParams.has('end_date');

        if (!hasStartDate || !hasEndDate) {
            const filterForm = document.querySelector('form');
            if (filterForm) {
                filterForm.submit();
            }
        }
    });
</script>


@endsection