@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Supplier Payment Report</h2>

    <div id="loader" style="display: none; text-align: center; margin: 20px;">
        <img src="{{ asset('images/loader.gif') }}" alt="Loading..." width="60">
    </div>

    <form id="reportForm" method="POST" action="{{ route('supplier.report.filter') }}">
        @csrf
        <div class="row mb-3">
            <div class="col">
                <label>From Date:</label>
                <input type="date" name="fromDate" class="form-control" 
                    value="{{ request('fromDate', \Carbon\Carbon::now()->format('Y-m-d')) }}" required>
            </div>
            <div class="col">
                <label>To Date:</label>
                <input type="date" name="toDate" class="form-control" 
                    value="{{ request('toDate', \Carbon\Carbon::now()->format('Y-m-d')) }}" required>
            </div>
            <div class="col">
                <label>Account:</label>
                <select id="account_id" name="account_id" class="form-control" required>
                    <option value="">Select Account</option>
                    @foreach($accounts as $acc)
                        <option value="{{ $acc->Account_ID }}" {{ request('account_id') == $acc->Account_ID ? 'selected' : '' }}>
                            {{ $acc->Account_Title }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col">
                <label>Site:</label>
                <select id="site_id" name="site" class="form-control" required>
                    <option value="">Select Site</option>
                    @foreach($sites as $s)
                        <option value="{{ $s }}" {{ request('site') == $s ? 'selected' : '' }}>{{ $s }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col">
                <label>&nbsp;</label>
                <button type="submit" class="btn btn-primary form-control">Generate</button>
            </div>
        </div>
    </form>

    @isset($data)
    <div class="mb-3 text-end">
        <a href="{{ route('supplier.report') }}" class="btn btn-secondary">Back</a>
        <button onclick="window.print()" class="btn btn-dark">Print</button>

        <a href="{{ route('supplier.report.export.pdf', [
            'fromDate'   => request('fromDate'),
            'toDate'     => request('toDate'),
            'account_id' => request('account_id'),
            'site'       => request('site')
        ]) }}" class="btn btn-danger">Export PDF</a>

        <a href="{{ route('supplier.report.export.excel', [
            'fromDate'   => request('fromDate'),
            'toDate'     => request('toDate'),
            'account_id' => request('account_id'),
            'site'       => request('site')
        ]) }}" class="btn btn-success">Export To Excel</a>

 <!--       <a href="#" class="btn btn-info">Crystal Report</a>--> <!-- Placeholder -->
    </div>

    <div class="table-responsive printableArea">
        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Voucher</th>

                    <th style="font-size:8pt;">Debit</th>
                    <th style="font-size:8pt;">Credit</th>
                    <th style="font-size:8pt;">Voucher Date</th>
                    <th style="font-size:8pt;">Remarks</th>
                    <th style="font-size:8pt;">Site</th>
 
                </tr>
            </thead>
            <tbody>
                @forelse($data as $row)
                <tr>

                    <td style="font-size:8pt;">{{ $row->Voucher_ID }}</td>
                    <td class="text-right" style="font-size:8pt;">{{ number_format($row->Debit, 0,0) }}</td>
                    <td class="text-right" style="font-size:8pt;">{{ number_format($row->Credit, 0,0) }}</td>
                    <td style="font-size:8pt;">{{ $row->Voucher_Date }}</td>
                    <td style="font-size:8pt;">{{ $row->Remarks }}</td>
                    <td style="font-size:8pt;">{{ $row->Site }}</td>

                </tr>
                @empty
                <tr>
                    <td colspan="10" class="text-center">No data found for the selected filters.</td>
                </tr>
                @endforelse

                @php
                    $totalDebit = 0;
                    $totalCredit = 0;
                    foreach ($data as $row) {
                        $totalDebit += $row->Debit;
                        $totalCredit += $row->Credit;
                    }
                @endphp
<tr style="font-weight: bold;">
    <td class="text-end" style="font-size:8pt;">Total:</td>
    <td style="font-size:8pt;">{{ number_format($totalDebit, 0,0) }}</td>
    <td style="font-size:8pt;">{{ number_format($totalCredit, 0,0) }}</td>
    <td colspan="3" style="font-size:8pt;"><strong>Closing Balance: {{ number_format($totalDebit - $totalCredit, 0,0) }}</strong></td>
</tr>
            </tbody>
        </table>
    </div>
    @endisset
</div>

<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
@media print {
    body * {
        visibility: hidden;
    }
    .printableArea, .printableArea * {
        visibility: visible;
    }
    .printableArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}

/* Font size for table */
.table thead tr,
.table tbody tr {
    font-size: 8pt;
}
</style>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('#account_id').select2({
        placeholder: "Select a supplier",
        allowClear: true
    });
    
    $('#site_id').select2({
        placeholder: "Select a site",
        allowClear: true
    });

    // Show loader on form submit
    $('#reportForm').on('submit', function () {
        $('#loader').show();
    });
});
</script>
@endsection