@extends('layouts.app')
@section('title', 'Customer Wise Credit Summary Report')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
    :root {
        --primary-blue: #2563eb;
        --secondary-blue: #3b82f6;
        --accent-green: #10b981;
        --bg-light: #f8fafc;
        --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    body {
        font-family: 'Inter', sans-serif;
        background-color: var(--bg-light);
    }

    .report-container {
        padding: 2rem;
    }

    .premium-card {
        background: white;
        border-radius: 1rem;
        border: none;
        box-shadow: var(--card-shadow);
        margin-bottom: 2rem;
        overflow: hidden;
    }

    .card-gradient-header {
        background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
        padding: 1.5rem 2rem;
        color: white;
    }

    .card-title {
        margin: 0;
        font-weight: 700;
        letter-spacing: -0.025em;
        color: white;
    }

    .filter-section {
        padding: 1.5rem 2rem;
        background: white;
        border-bottom: 1px solid #e2e8f0;
    }

    .btn-premium {
        background: var(--primary-blue);
        color: white;
        border-radius: 0.5rem;
        padding: 0.625rem 1.25rem;
        font-weight: 600;
        transition: all 0.2s;
        border: none;
    }

    .btn-premium:hover {
        background: var(--secondary-blue);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        color: white;
    }

    .table-container {
        padding: 1.5rem 2rem;
    }

    .premium-table thead th {
        background: #f1f5f9;
        color: #475569;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        padding: 1rem;
        border: none;
    }

    .premium-table tbody td {
        padding: 1rem;
        vertical-align: middle;
        color: #1e293b;
        border-bottom: 1px solid #f1f5f9;
    }

    .group-row {
        background: #f8fafc !important;
        font-weight: 700;
        color: #1e3a8a;
    }

    .badge-paid { background: #d1fae5; color: #065f46; }
    .badge-due { background: #fee2e2; color: #991b1b; }
    .badge-partial { background: #fef3c7; color: #92400e; }
    
    .badge-premium {
        padding: 0.35rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }
</style>
@endsection

@section('content')
<div class="report-container">
    <div class="premium-card">
        <div class="card-gradient-header d-flex justify-content-between align-items-center">
            <h2 class="card-title">Customer Wise Credit Summary Report</h2>
            <button type="button" class="btn btn-light" id="print_report">
                <i class="fas fa-print"></i> @lang('messages.print')
            </button>
        </div>

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

        <div class="table-container">
            <div class="table-responsive">
                <table class="table premium-table" id="customer_credit_report_table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Invoi. No.</th>
                            <th>Cashier</th>
                            <th>Customer Code</th>
                            <th>Payment Status</th>
                            <th>Payment Method</th>
                            <th>Invoice Total</th>
                            <th>Invoiced Cre. Amt.</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr class="bg-gray font-17 footer-total text-center">
                            <td colspan="6"><strong>@lang('sale.total'):</strong></td>
                            <td><span class="display_currency" id="footer_final_total" data-currency_symbol ="true"></span></td>
                            <td><span class="display_currency" id="footer_credit_amount" data-currency_symbol ="true"></span></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

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

        customer_credit_report_table = $('#customer_credit_report_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '/ls-reports/customerwise-credit-summary',
                data: function(d) {
                    d.location_id = $('#location_id').val();
                    var start = '';
                    var end = '';
                    if ($('#date_range').val()) {
                        start = $('#date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
                        end = $('#date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');
                    }
                    d.start_date = start;
                    d.end_date = end;
                }
            },
            columns: [
                { data: 'transaction_date', name: 'transaction_date' },
                { data: 'invoice_no', name: 'invoice_no' },
                { data: 'cashier_name', name: 'cashier_name' },
                { data: 'customer_code', name: 'customer_code' },
                { data: 'payment_status', name: 'payment_status' },
                { data: 'payment_method', name: 'payment_method' },
                { data: 'final_total', name: 'final_total' },
                { data: 'credit_amount', name: 'credit_amount', searchable: false }
            ],
            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(3, { page: 'current' }).data().each(function (group, i) {
                    var customerName = api.row(i).data().customer_name;
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group-row"><td colspan="8">' + customerName + ' ('+ group +')</td></tr>'
                        );
                        last = group;
                    }
                });

                __currency_convert_recursively($('#customer_credit_report_table'));
            },
            footerCallback: function (row, data, start, end, display) {
                var footer_final_total = 0;
                var footer_credit_amount = 0;
                for (var r in data) {
                    footer_final_total += $(data[r].final_total).data('orig-value') ? parseFloat($(data[r].final_total).data('orig-value')) : 0;
                    footer_credit_amount += $(data[r].credit_amount).data('orig-value') ? parseFloat($(data[r].credit_amount).data('orig-value')) : 0;
                }

                $('.footer-total #footer_final_total').html(__number_f(footer_final_total));
                $('.footer-total #footer_credit_amount').html(__number_f(footer_credit_amount));
                
                __currency_convert_recursively($('.footer-total'));
            }
        });

        $(document).on('change', '#location_id', function() {
            customer_credit_report_table.ajax.reload();
        });

        $(document).on('click', '#print_report', function() {
            var start = '';
            var end = '';
            if($('#date_range').val()) {
                start = $('#date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
                end = $('#date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');
            }
            var location_id = $('#location_id').val();

            var url = '/ls-reports/customerwise-credit-summary?print=true&start_date=' + start + '&end_date=' + end + '&location_id=' + location_id;
            window.open(url, '_blank');
        });
    });
</script>
@endsection