@extends('layouts.app')
@section('title', 'Commission Agent 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, #1e3a8a 0%, #3b82f6 100%);
        --secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
        --accent-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);
        --glass-bg: rgba(255, 255, 255, 0.95);
        --glass-border: rgba(226, 232, 240, 0.8);
        --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        --primary-blue: #1e3a8a;
    }

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

    .premium-card {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        box-shadow: var(--card-shadow);
        overflow: hidden;
        transition: transform 0.3s ease;
    }

    .card-gradient-header {
        background: var(--primary-gradient);
        padding: 20px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: none;
    }

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

    .custom-select, .custom-input {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 10px 16px !important;
        height: 44px !important;
        font-size: 0.95rem !important;
        transition: all 0.2s ease !important;
    }

    .custom-select:focus, .custom-input:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }

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

    .premium-table tbody tr {
        transition: background-color 0.2s ease;
    }

    .premium-table tbody tr:hover {
        background-color: #f8fafc !important;
    }

    .premium-table td {
        padding: 16px;
        color: #1e293b;
        font-size: 0.9rem;
        border-bottom: 1px solid #f1f5f9;
    }

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

    .group-total {
        background-color: #f8fafc !important;
        font-weight: 600;
        border-top: 2px solid #e2e8f0 !important;
    }

    .btn-export {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        padding: 8px 16px;
        font-weight: 600;
        font-size: 0.875rem;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-export:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        color: white;
    }

    .btn-export i {
        font-size: 1rem;
    }

    .profit-pos { color: #10b981; font-weight: 600; }
    .profit-neg { color: #ef4444; font-weight: 600; }

    /* Animations */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .premium-card {
        animation: fadeIn 0.5s ease-out;
    }
</style>
@endsection

@section('content')
<div class="report-container">
    <!-- Main Card -->
    <div class="premium-card">
        <div class="card-gradient-header">
            <h1 class="card-title">Commission Agent Report</h1>
            <div class="report-actions">
                <button type="button" class="btn btn-export" id="print_report_btn">
                    <i class="fa fa-print"></i> @lang('messages.print')
                </button>
                <button type="button" class="btn btn-export" id="export_excel_btn">
                    <i class="fa fa-file-excel"></i> Excel Export
                </button>
            </div>
        </div>

        <div class="card-body p-4">
            <!-- Filters -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('ca_date_filter', __('report.date_range') . ':') !!}
                        {!! Form::text('ca_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('sr_business_id',  __('business.business_location') . ':') !!}
                        {!! Form::select('sr_business_id', $business_locations, null, ['class' => 'form-control custom-select select2', 'style' => 'width:100%', 'placeholder' => __('messages.all')]); !!}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('sr_id',  __('report.user') . ':') !!}
                        {!! Form::select('sr_id', $commission_agents, null, ['class' => 'form-control custom-select select2', 'style' => 'width:100%', 'placeholder' => __('report.all_users')]); !!}
                    </div>
                </div>
            </div>

            <!-- Table -->
            <div class="table-responsive">
                <table class="table premium-table" id="commission_agent_report_table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Agent</th>
                            <th>Item Name</th>
                            <th>ItemCode</th>
                            <th>Sold Qty</th>
                            <th>Total Cost</th>
                            <th>Cost Code</th>
                            <th>Net Sale</th>
                            <th>Profit OR Loss</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr class="bg-gray font-17 footer-total text-right">
                            <td colspan="3" class="text-right"><strong>@lang('sale.total'):</strong></td>
                            <td id="footer_total_qty" class="text-center"></td>
                            <td id="footer_total_cost"></td>
                            <td></td>
                            <td id="footer_total_net_sale"></td>
                            <td id="footer_total_profit_loss"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        $.fn.dataTable.ext.errMode = 'none';
        $('#commission_agent_report_table').on('error.dt', function(e, settings, techNote, message) {
            console.log('DataTables error:', message);
        });

        var intVal = function (i) {
            if (typeof i === 'string') {
                var temp = i.replace(/[\$,]/g, '');
                if (temp.indexOf('<') !== -1) {
                    try {
                        temp = $(i).text().replace(/[\$,]/g, '');
                    } catch (e) {
                        temp = 0;
                    }
                }
                return temp * 1;
            }
            return typeof i === 'number' ? i : 0;
        };

        var formatCurrency = function(val) {
            if (typeof __currency_trans_from_en !== 'undefined') {
                return __currency_trans_from_en(val, true);
            }
            return val.toFixed(2);
        };

        var formatNumber = function(val) {
            if (typeof __number_format !== 'undefined') {
                return __number_format(val);
            }
            return val;
        };

        ca_table = $('#commission_agent_report_table').DataTable({
            processing: true,
            serverSide: true,
            aaSorting: [[0, 'asc'], [1, 'desc']],
            dom: '<"d-flex justify-content-between align-items-center mb-4"lBf>rtip',
            buttons: [
                {
                    extend: 'excel',
                    text: '<i class="fa fa-file-excel"></i> Excel',
                    className: 'btn btn-sm btn-success',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'csv',
                    text: '<i class="fa fa-file-csv"></i> CSV',
                    className: 'btn btn-sm btn-info',
                    exportOptions: {
                        columns: ':visible'
                    }
                }
            ],
            ajax: {
                url: '/ls-reports/commission-agent-report',
                data: function(d) {
                    d.sr_business_id = $('#sr_business_id').val();
                    d.sr_id = $('#sr_id').val();
                    var start = '';
                    var end = '';
                    if ($('#ca_date_filter').val()) {
                        start = $('#ca_date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                        end = $('#ca_date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
                    }
                    d.start_date = start;
                    d.end_date = end;
                }
            },
            columns: [
                { data: 'agent_name', name: 'agent_name', visible: false },
                { data: 'product_name', name: 'product_name' },
                { data: 'sku', name: 'sku' },
                { data: 'quantity', name: 'quantity', className: 'text-center' },
                { data: 'total_cost', name: 'total_cost', className: 'text-right' },
                { data: 'cost_code', name: 'cost_code' },
                { data: 'net_sale', name: 'net_sale', className: 'text-right' },
                { 
                    data: 'profit_loss', 
                    name: 'profit_loss', 
                    searchable: false,
                    className: 'text-right',
                    render: function(data, type, row) {
                        var val = intVal(data);
                        var cls = val >= 0 ? 'profit-pos' : 'profit-neg';
                        if (typeof __currency_trans_from_en !== 'undefined') {
                            return '<span class="' + cls + '">' + __currency_trans_from_en(val, true) + '</span>';
                        }
                        return '<span class="' + cls + '">' + val.toFixed(2) + '</span>';
                    }
                }
            ],
            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                var group_qty = 0;
                var group_total_cost = 0;
                var group_net_sale = 0;
                var group_profit_loss = 0;

                api.column(0, { page: 'current' }).data().each(function (group, i) {
                    var data = api.row(i).data();
                    var qty = intVal(data.quantity);
                    var cost = intVal(data.total_cost);
                    var net_sale = intVal(data.net_sale);
                    var profit_loss = net_sale - cost;

                    if (last !== group) {
                        if (last !== null) {
                            var profit_class = group_profit_loss >= 0 ? 'profit-pos' : 'profit-neg';
                            $(rows).eq(i-1).after(
                                '<tr class="group-total">' +
                                '<td colspan="2" class="text-right">Subtotal (' + last + '):</td>' +
                                '<td class="text-center">' + formatNumber(group_qty) + '</td>' +
                                '<td class="text-right">' + formatCurrency(group_total_cost) + '</td>' +
                                '<td></td>' +
                                '<td class="text-right">' + formatCurrency(group_net_sale) + '</td>' +
                                '<td class="text-right ' + profit_class + '">' + formatCurrency(group_profit_loss) + '</td></tr>'
                            );
                        }
                        $(rows).eq(i).before(
                            '<tr class="group"><td colspan="8" style="padding-left: 20px;">' + (group || 'N/A') + '</td></tr>'
                        );
                        last = group;
                        group_qty = 0;
                        group_total_cost = 0;
                        group_net_sale = 0;
                        group_profit_loss = 0;
                    }

                    group_qty += qty;
                    group_total_cost += cost;
                    group_net_sale += net_sale;
                    group_profit_loss += profit_loss;

                    if (i === (api.rows({ page: 'current' }).count() - 1)) {
                         var last_profit_class = group_profit_loss >= 0 ? 'profit-pos' : 'profit-neg';
                         $(rows).eq(i).after(
                                '<tr class="group-total">' +
                                '<td colspan="2" class="text-right">Subtotal (' + last + '):</td>' +
                                '<td class="text-center">' + formatNumber(group_qty) + '</td>' +
                                '<td class="text-right">' + formatCurrency(group_total_cost) + '</td>' +
                                '<td></td>' +
                                '<td class="text-right">' + formatCurrency(group_net_sale) + '</td>' +
                                '<td class="text-right ' + last_profit_class + '">' + formatCurrency(group_profit_loss) + '</td></tr>'
                            );
                    }
                });
                if (typeof __currency_convert_recursively !== 'undefined') {
                    __currency_convert_recursively($('#commission_agent_report_table'));
                }
            },
            footerCallback: function(row, data, start, end, display) {
                var api = this.api();

                var intVal = function (i) {
                    if (typeof i === 'string') {
                        var temp = i.replace(/[\$,]/g, '');
                        if (temp.indexOf('<') !== -1) {
                            try {
                                temp = $(i).text().replace(/[\$,]/g, '');
                            } catch (e) {
                                temp = 0;
                            }
                        }
                        return temp * 1;
                    }
                    return typeof i === 'number' ? i : 0;
                };

                var total_qty = 0;
                var page_total_cost = 0;
                var page_total_net_sale = 0;
                var page_total_profit_loss = 0;

                if (data.length > 0) {
                    try {
                        total_qty = api.column(3).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                        page_total_cost = api.column(4, {page: 'current'}).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                        page_total_net_sale = api.column(6, {page: 'current'}).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                        page_total_profit_loss = api.column(7, {page: 'current'}).data().reduce(function (a, b) { return intVal(a) + intVal(b); }, 0);
                    } catch (e) {
                        console.error('Error calculating totals:', e);
                    }
                }

                $('#footer_total_qty').html((typeof __number_format !== 'undefined') ? __number_format(total_qty) : total_qty);
                $('#footer_total_cost').html((typeof __currency_trans_from_en !== 'undefined') ? __currency_trans_from_en(page_total_cost, true) : page_total_cost.toFixed(2));
                $('#footer_total_net_sale').html((typeof __currency_trans_from_en !== 'undefined') ? __currency_trans_from_en(page_total_net_sale, true) : page_total_net_sale.toFixed(2));
                
                var footer_profit_cls = page_total_profit_loss >= 0 ? 'profit-pos' : 'profit-neg';
                var footer_profit_html = (typeof __currency_trans_from_en !== 'undefined') ? __currency_trans_from_en(page_total_profit_loss, true) : page_total_profit_loss.toFixed(2);
                $('#footer_total_profit_loss').html('<span class="' + footer_profit_cls + '">' + footer_profit_html + '</span>');
            }
        });

        if($('#ca_date_filter').length == 1) {
            $('#ca_date_filter').daterangepicker(dateRangeSettings);
            $('#ca_date_filter').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format(moment_date_format) + ' ~ ' + picker.endDate.format(moment_date_format));
                ca_table.ajax.reload();
            });
            $('#ca_date_filter').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                ca_table.ajax.reload();
            });
        }

        $(document).on('change', '#sr_business_id, #sr_id', function() {
            ca_table.ajax.reload();
        });

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

            var url = '/ls-reports/commission-agent-report?print=true&start_date=' + start + '&end_date=' + end + '&sr_business_id=' + sr_business_id + '&sr_id=' + sr_id;
            window.open(url, '_blank');
        });

        $(document).on('click', '#export_excel_btn', function() {
            ca_table.button('.buttons-excel').trigger();
        });
    });
</script>
@endsection