@extends('layouts.app')
@section('title', 'Invoice Payment Method Report')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --glass-bg: rgba(255, 255, 255, 0.7);
        --glass-border: rgba(255, 255, 255, 0.4);
        --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    }

    .report-container {
        font-family: 'Outfit', sans-serif;
        padding: 20px;
        background: #f0f2f5;
        min-height: 100vh;
    }

    .premium-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .premium-title {
        font-size: 2.2rem;
        font-weight: 700;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
    }

    .glass-card {
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        box-shadow: var(--card-shadow);
        padding: 24px;
        margin-bottom: 24px;
    }

    .custom-select, .custom-input {
        background: white !important;
        border: 1px solid #e0e6ed !important;
        border-radius: 12px !important;
        padding: 10px 15px !important;
        height: auto !important;
        font-size: 0.95rem !important;
    }

    .premium-table thead th {
        background: #f8fafc;
        color: #475569;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.05em;
        padding: 15px;
        border-bottom: 2px solid #e2e8f0;
    }

    .premium-table tbody td {
        padding: 15px;
        vertical-align: middle;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: var(--primary-gradient) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
    }
</style>
@endsection

@section('content')
<div class="report-container">
    <div class="premium-header">
        <h1 class="premium-title">Invoice Payment Method</h1>
    </div>

    <!-- Filters -->
    <div class="glass-card">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('ipm_date_filter', __('report.date_range') . ':') !!}
                    {!! Form::text('ipm_date_filter', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control custom-input', 'readonly']); !!}
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('ipm_location_id',  __('purchase.business_location') . ':') !!}
                    {!! Form::select('ipm_location_id', $business_locations, null, ['class' => 'form-control custom-select select2', 'style' => 'width:100%', 'placeholder' => __('messages.all')]); !!}
                </div>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="glass-card">
        <div class="table-responsive">
            <table class="table premium-table" id="invoice_payment_method_table" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Transaction Date</th>
                        <th>Invoice No</th>
                        <th>Customer</th>
                        <th class="text-right">Sales Amount</th>
                        <th class="text-right">Discount</th>
                        <th class="text-right">Invoice Amt</th>
                        <th class="text-right">Cash</th>
                        <th class="text-right">Cheque</th>
                        <th class="text-right">Credit</th>
                        <th class="text-right">Other</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr class="bg-gray font-17 footer-total text-right">
                        <td colspan="3" class="text-center"><strong>@lang('sale.total'):</strong></td>
                        <td><span class="display_currency" id="footer_sales_total" data-currency_symbol ="true"></span></td>
                        <td><span class="display_currency" id="footer_discount_total" data-currency_symbol ="true"></span></td>
                        <td><span class="display_currency" id="footer_invoice_amt_total" data-currency_symbol ="true"></span></td>
                        <td><span class="display_currency" id="footer_cash_total" data-currency_symbol ="true"></span></td>
                        <td><span class="display_currency" id="footer_cheque_total" data-currency_symbol ="true"></span></td>
                        <td><span class="display_currency" id="footer_credit_total" data-currency_symbol ="true"></span></td>
                        <td><span class="display_currency" id="footer_other_total" data-currency_symbol ="true"></span></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        if($('#ipm_date_filter').length == 1) {
            $('#ipm_date_filter').daterangepicker(
                dateRangeSettings,
                function (start, end) {
                    $('#ipm_date_filter').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                    ipm_table.ajax.reload();
                }
            );
            $('#ipm_date_filter').on('cancel.daterangepicker', function(ev, picker) {
                $('#ipm_date_filter').val('');
                ipm_table.ajax.reload();
            });
        }

        ipm_table = $('#invoice_payment_method_table').DataTable({
            processing: true,
            serverSide: true,
            aaSorting: [[0, 'desc']],
            ajax: {
                url: '/ls-reports/invoice-payment-method',
                data: function(d) {
                    var start = '';
                    var end = '';
                    if($('#ipm_date_filter').val()) {
                        start = $('#ipm_date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                        end = $('#ipm_date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
                    }
                    d.start_date = start;
                    d.end_date = end;
                    d.location_id = $('#ipm_location_id').val();
                }
            },
            columns: [
                { data: 'transaction_date', name: 'transaction_date' },
                { data: 'invoice_no', name: 'invoice_no' },
                { data: 'customer_name', name: 'contacts.name' },
                { data: 'total_before_tax', name: 'total_before_tax', className: 'text-right' },
                { data: 'discount_amount', name: 'discount_amount', searchable: false, orderable: false, className: 'text-right' },
                { data: 'final_total', name: 'final_total', className: 'text-right' },
                { data: 'cash_payment', name: 'cash_payment', searchable: false, orderable: false, className: 'text-right' },
                { data: 'cheque_payment', name: 'cheque_payment', searchable: false, orderable: false, className: 'text-right' },
                { data: 'credit_payment', name: 'credit_payment', searchable: false, orderable: false, className: 'text-right' },
                { data: 'other_payment', name: 'other_payment', searchable: false, orderable: false, className: 'text-right' },
            ],
            fnDrawCallback: function(oSettings) {
                __currency_convert_recursively($('#invoice_payment_method_table'));
            },
            footerCallback: function(row, data, start, end, display) {
                var footer_sales_total = 0;
                var footer_discount_total = 0;
                var footer_invoice_amt_total = 0;
                var footer_cash_total = 0;
                var footer_cheque_total = 0;
                var footer_credit_total = 0;
                var footer_other_total = 0;

                for (var r in data) {
                    footer_sales_total += $(data[r].total_before_tax).data('orig-value') ? parseFloat($(data[r].total_before_tax).data('orig-value')) : 0;
                    footer_discount_total += $(data[r].discount_amount).data('orig-value') ? parseFloat($(data[r].discount_amount).data('orig-value')) : 0;
                    footer_invoice_amt_total += $(data[r].final_total).data('orig-value') ? parseFloat($(data[r].final_total).data('orig-value')) : 0;
                    footer_cash_total += $(data[r].cash_payment).data('orig-value') ? parseFloat($(data[r].cash_payment).data('orig-value')) : 0;
                    footer_cheque_total += $(data[r].cheque_payment).data('orig-value') ? parseFloat($(data[r].cheque_payment).data('orig-value')) : 0;
                    footer_credit_total += $(data[r].credit_payment).data('orig-value') ? parseFloat($(data[r].credit_payment).data('orig-value')) : 0;
                    footer_other_total += $(data[r].other_payment).data('orig-value') ? parseFloat($(data[r].other_payment).data('orig-value')) : 0;
                }

                $('#footer_sales_total').html(__currency_trans_from_en(footer_sales_total));
                $('#footer_discount_total').html(__currency_trans_from_en(footer_discount_total));
                $('#footer_invoice_amt_total').html(__currency_trans_from_en(footer_invoice_amt_total));
                $('#footer_cash_total').html(__currency_trans_from_en(footer_cash_total));
                $('#footer_cheque_total').html(__currency_trans_from_en(footer_cheque_total));
                $('#footer_credit_total').html(__currency_trans_from_en(footer_credit_total));
                $('#footer_other_total').html(__currency_trans_from_en(footer_other_total));
            }
        });

        $(document).on('change', '#ipm_location_id', function() {
            ipm_table.ajax.reload();
        });
    });
</script>
@endsection