@extends('layouts.app')
@section('title', 'Invoice Return Details 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 Return Details Report</h1>
    </div>

    <!-- Filters -->
    <div class="glass-card">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('ird_date_filter', __('report.date_range') . ':') !!}
                    {!! Form::text('ird_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('ird_location_id',  __('purchase.business_location') . ':') !!}
                    {!! Form::select('ird_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_return_details_table" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Return Invoice No</th>
                        <th>Parent Invoice No</th>
                        <th>Return Date</th>
                        <th>Customer Code</th>
                        <th>Customer Name</th>
                        <th>Salesperson</th>
                        <th>Item Code</th>
                        <th>Item Description</th>
                        <th class="text-right">Unit Price</th>
                        <th class="text-right">Return Qty</th>
                        <th class="text-right">Return Subtotal</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr class="bg-gray font-17 footer-total text-right">
                        <td colspan="9" class="text-center"><strong>@lang('sale.total'):</strong></td>
                        <td><span class="display_currency" id="footer_return_qty" data-is_quantity="true" data-currency_symbol ="false"></span></td>
                        <td><span class="display_currency" id="footer_return_subtotal" data-currency_symbol ="true"></span></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
@endsection

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

        ird_table = $('#invoice_return_details_table').DataTable({
            processing: true,
            serverSide: true,
            aaSorting: [[2, 'desc']],
            ajax: {
                url: '/ls-reports/invoice-return-details',
                data: function(d) {
                    var start = '';
                    var end = '';
                    if($('#ird_date_filter').val()) {
                        start = $('#ird_date_filter').data('daterangepicker').startDate.format('YYYY-MM-DD');
                        end = $('#ird_date_filter').data('daterangepicker').endDate.format('YYYY-MM-DD');
                    }
                    d.start_date = start;
                    d.end_date = end;
                    d.location_id = $('#ird_location_id').val();
                }
            },
            columns: [
                { data: 'return_invoice_no', name: 'return_invoice_no' },
                { data: 'parent_invoice_no', name: 'parent_invoice_no' },
                { data: 'return_date', name: 'return_date' },
                { data: 'customer_code', name: 'c.contact_id' },
                { data: 'customer_name', name: 'c.name' },
                { data: 'salesperson', name: 'salesperson', searchable: false },
                { data: 'item_code', name: 'v.sub_sku' },
                { data: 'item_description', name: 'item_description', searchable: false },
                { data: 'unit_price', name: 'unit_price', className: 'text-right' },
                { data: 'return_quantity', name: 'return_quantity', className: 'text-right', searchable: false },
                { data: 'return_subtotal', name: 'return_subtotal', className: 'text-right', searchable: false },
            ],
            fnDrawCallback: function(oSettings) {
                __currency_convert_recursively($('#invoice_return_details_table'));
            },
            footerCallback: function(row, data, start, end, display) {
                var footer_qty = 0;
                var footer_subtotal = 0;

                for (var r in data) {
                    footer_qty += $(data[r].return_quantity).data('orig-value') ? parseFloat($(data[r].return_quantity).data('orig-value')) : 0;
                    footer_subtotal += $(data[r].return_subtotal).data('orig-value') ? parseFloat($(data[r].return_subtotal).data('orig-value')) : 0;
                }

                $('#footer_return_qty').html(__number_f(footer_qty, false, false, __currency_precision));
                $('#footer_return_subtotal').html(__currency_trans_from_en(footer_subtotal));
            }
        });

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