@extends('layouts.app')
@section('title', __('rma.rma_cases'))

@section('content')
<section class="content-header no-print">
    <div class="tw-flex tw-items-start tw-justify-between tw-flex-wrap tw-gap-3">
        <div>
            <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black tw-m-0">
                @lang('rma.rma_cases')
            </h1>
            <p class="tw-mt-1 tw-text-sm tw-text-gray-600">
                Track customer returns and after-sales outcomes step by step.
            </p>
        </div>
        @can('rma.create')
            <a href="{{ action([\App\Http\Controllers\RmaController::class, 'create']) }}" class="tw-dw-btn tw-dw-btn-primary tw-text-white">
                <i class="fa fa-plus"></i> @lang('rma.create_rma')
            </a>
        @endcan
    </div>
</section>

<section class="content no-print">
    @component('components.filters', ['title' => __('report.filters')])
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('rma_filter_location_id', __('purchase.business_location') . ':') !!}
                {!! Form::select('rma_filter_location_id', $business_locations, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]) !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('rma_filter_customer_id', __('contact.customer') . ':') !!}
                {!! Form::select('rma_filter_customer_id', $customers, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]) !!}
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                {!! Form::label('rma_filter_status', __('rma.status') . ':') !!}
                {!! Form::select('rma_filter_status', $statuses, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]) !!}
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                {!! Form::label('rma_filter_step', __('rma.current_step') . ':') !!}
                {!! Form::select('rma_filter_step', $step_labels, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]) !!}
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                {!! Form::label('rma_filter_date_range', __('report.date_range') . ':') !!}
                {!! Form::text('rma_filter_date_range', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'readonly']) !!}
            </div>
        </div>
    @endcomponent

    @component('components.widget', ['class' => 'box-primary', 'title' => __('rma.rma_cases')])
        @include('rma.partials.list_table')
    @endcomponent
</section>
@endsection

@section('javascript')
<script>
    $(document).ready(function() {
        var rmaAuditCache = {};
        var rmaAuditPending = {};
        var rmaAuditI18n = {
            loading: @json(__('lang_v1.loading')),
            no_data: @json(__('messages.no_data')),
            something_went_wrong: @json(__('messages.something_went_wrong'))
        };

        function ensureAuditPopover($el) {
            if (!$el || !$el.length) {
                return;
            }
            if ($el.data('bs.popover')) {
                return;
            }

            function computeAuditPlacement(domEl) {
                try {
                    var rect = domEl.getBoundingClientRect();
                    var vw = window.innerWidth || document.documentElement.clientWidth || 1024;
                    var vh = window.innerHeight || document.documentElement.clientHeight || 768;

                    // Keep conservative sizes so we don't pick a side that will clip.
                    var desiredW = 620;
                    var desiredH = 380;

                    var spaceRight = vw - rect.right;
                    var spaceLeft = rect.left;
                    var spaceBottom = vh - rect.bottom;
                    var spaceTop = rect.top;

                    if (spaceRight >= desiredW) {
                        return 'right';
                    }
                    if (spaceLeft >= desiredW) {
                        return 'left';
                    }
                    if (spaceBottom >= desiredH) {
                        return 'bottom';
                    }
                    if (spaceTop >= desiredH) {
                        return 'top';
                    }

                    // Fallback to the direction with the most space.
                    var best = 'right';
                    var bestSpace = spaceRight;
                    if (spaceLeft > bestSpace) { best = 'left'; bestSpace = spaceLeft; }
                    if (spaceBottom > bestSpace) { best = 'bottom'; bestSpace = spaceBottom; }
                    if (spaceTop > bestSpace) { best = 'top'; bestSpace = spaceTop; }
                    return best;
                } catch (e) {
                    return 'right';
                }
            }

            $el.popover({
                trigger: 'hover',
                html: true,
                // Auto-pick a side to prevent the popover from being cut off.
                placement: function(tip, el) {
                    return computeAuditPlacement(el);
                },
                container: 'body',
                viewport: { selector: 'body', padding: 8 },
                template: '<div class="popover rma-audit-popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
                content: function() {
                    var id = $el.data('rma-id');
                    if (rmaAuditCache[id]) {
                        return rmaAuditCache[id];
                    }
                    return '<div class="text-muted" style="padding:6px 4px;">' + (rmaAuditI18n.loading || 'Loading...') + '</div>';
                },
                delay: { show: 350, hide: 150 }
            });

            $el.on('mouseenter', function() {
                var id = $el.data('rma-id');
                if (!id || rmaAuditCache[id] || rmaAuditPending[id]) {
                    return;
                }

                rmaAuditPending[id] = true;
                $.ajax({
                    method: 'GET',
                    url: "{{ url('rmas') }}/" + id + "/audit-hover",
                    dataType: 'json',
                    success: function(resp) {
                        if (resp && resp.success && resp.html) {
                            rmaAuditCache[id] = resp.html;
                        } else {
                            rmaAuditCache[id] = '<div class="text-muted" style="padding:6px 4px;">' + rmaAuditI18n.no_data + '</div>';
                        }
                    },
                    error: function() {
                        rmaAuditCache[id] = '<div class="text-danger" style="padding:6px 4px;">' + rmaAuditI18n.something_went_wrong + '</div>';
                    },
                    complete: function() {
                        rmaAuditPending[id] = false;
                        var pop = $el.data('bs.popover');
                        if (pop && pop.tip) {
                            try {
                                var $tip = $(pop.tip());
                                if ($tip.hasClass('in') || $tip.hasClass('show')) {
                                    pop.options.content = rmaAuditCache[id];
                                    $tip.find('.popover-content, .popover-body').html(rmaAuditCache[id]);
                                }
                            } catch (e) {}
                        }
                    }
                });
            });
        }

        function initAuditPopovers() {
            $('.js-rma-audit-hover').each(function() {
                ensureAuditPopover($(this));
            });
        }

        $('#rma_filter_date_range').daterangepicker(
            dateRangeSettings,
            function(start, end) {
                $('#rma_filter_date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
                rma_table.ajax.reload();
            }
        );

        $('#rma_filter_date_range').on('cancel.daterangepicker', function() {
            $('#rma_filter_date_range').val('');
            rma_table.ajax.reload();
        });

        rma_table = $('#rma_table').DataTable({
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            orderFixed: [[0, 'desc']],
            ajax: {
                url: "{{ action([\App\Http\Controllers\RmaController::class, 'index']) }}",
                data: function(d) {
                    d.location_id = $('#rma_filter_location_id').val();
                    d.customer_id = $('#rma_filter_customer_id').val();
                    d.status = $('#rma_filter_status').val();
                    d.current_step = $('#rma_filter_step').val();

                    if ($('#rma_filter_date_range').val()) {
                        d.start_date = $('#rma_filter_date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
                        d.end_date = $('#rma_filter_date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');
                    }
                },
                error: function(xhr) {
                    var message = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : "{{ __('messages.something_went_wrong') }}";
                    toastr.error(message);
                    $('#rma_table_processing').hide();
                }
            },
            columnDefs: [{
                targets: [8],
                orderable: false,
                searchable: false
            }],
            columns: [
                {data: 'created_at', name: 'rmas.created_at'},
                {data: 'rma_no', name: 'rmas.rma_no'},
                {data: 'sale_invoice_no', name: 'sale.invoice_no'},
                {data: 'customer_display', name: 'c.name'},
                {data: 'location_name', name: 'bl.name'},
                {data: 'items_count', name: 'items_count'},
                {data: 'step_label', name: 'rmas.current_step'},
                {data: 'status', name: 'rmas.status'},
                {data: 'action', name: 'action'}
            ],
            drawCallback: function() {
                initAuditPopovers();
            }
        });

        $('#rma_filter_location_id, #rma_filter_customer_id, #rma_filter_status, #rma_filter_step').change(function() {
            rma_table.ajax.reload();
        });

        $(document).on('click', 'a.delete_rma', function(e) {
            e.preventDefault();
            var delete_url = $(this).data('href');

            if (!delete_url) {
                toastr.error("{{ __('messages.something_went_wrong') }}");
                return false;
            }

            swal({
                title: LANG.sure,
                icon: 'warning',
                buttons: true,
                dangerMode: true,
            }).then(function(willDelete) {
                if (willDelete) {
                    $.ajax({
                        method: 'DELETE',
                        url: delete_url,
                        dataType: 'json',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(result) {
                            if (result.success) {
                                toastr.success(result.msg);
                                rma_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        },
                        error: function(xhr) {
                            var message = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : "{{ __('messages.something_went_wrong') }}";
                            toastr.error(message);
                        }
                    });
                }
            });
        });
    });
</script>
<style>
    .popover.rma-audit-popover { max-width: 620px; }
    .popover.rma-audit-popover .popover-content { padding: 10px 12px; }
</style>
@endsection