@extends('layouts.app')
@section('title', $page_title ?? __('lang_v1.all_sales'))

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header no-print">
        <h1  class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">{{ $page_heading ?? __('sale.sells') }} <span id="sell_list_selected_range" class="tw-text-gray-600 tw-font-normal tw-text-base">@lang('lang_v1.all')</span>
        </h1>
    </section>
    <style>
        /* Keep the "Confirmed" checkbox column compact */
        #sell_table th.confirmed-col,
        #sell_table td.confirmed-col {
            width: 34px;
            min-width: 34px;
            max-width: 34px;
            padding-left: 6px !important;
            padding-right: 6px !important;
            text-align: center;
            vertical-align: middle;
        }

        #sell_table th:nth-child(2),
        #sell_table td:nth-child(2) {
            white-space: nowrap;
            width: 1%;
        }

        #sell_table td .btn-group > .dropdown-toggle.tw-dw-btn {
            padding: 4px 10px !important;
            font-size: 12px !important;
            line-height: 1.2 !important;
            min-height: auto;
        }

        #sell_table td .btn-group > .dropdown-toggle .caret {
            margin-left: 4px;
        }
    </style>

    <!-- Main content -->
    <section class="content no-print">
        @if(!empty($is_downpayment))
            <div class="tw-mb-4 tw-rounded-2xl tw-border tw-border-emerald-200 tw-bg-emerald-50 tw-p-4">
                <div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-3 md:tw-items-center md:tw-justify-between">
                    <div>
                        <h4 class="tw-m-0 tw-font-bold tw-text-emerald-900"><i class="fas fa-wallet" aria-hidden="true"></i> Downpayment workspace</h4>
                        <p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-emerald-900">
                            Create orders in POS, collect open balances here, and fulfill fully paid pre-orders after stock arrives.
                        </p>
                    </div>
                    <div class="tw-flex tw-flex-wrap tw-gap-2 tw-text-xs">
                        <span class="tw-rounded-full tw-bg-white tw-border tw-border-emerald-200 tw-px-3 tw-py-1">Partial = balance open</span>
                        <span class="tw-rounded-full tw-bg-white tw-border tw-border-emerald-200 tw-px-3 tw-py-1">Paid + no stock = pre-order</span>
                        <span class="tw-rounded-full tw-bg-white tw-border tw-border-emerald-200 tw-px-3 tw-py-1">Paid + stock = sale</span>
                    </div>
                </div>
            </div>
        @endif
        @component('components.filters', ['title' => __('report.filters')])
            @include('sell.partials.sell_list_filters')
            @if ($payment_types)
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('payment_method', __('lang_v1.payment_method') . ':') !!}
                        {!! Form::select('payment_method', $payment_types, null, [
                            'class' => 'form-control select2',
                            'style' => 'width:100%',
                            'placeholder' => __('lang_v1.all'),
                        ]) !!}
                    </div>
                </div>
            @endif

            @if (!empty($sources))
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('sell_list_filter_source', __('lang_v1.sources') . ':') !!}

                        {!! Form::select('sell_list_filter_source', $sources, null, [
                            'class' => 'form-control select2',
                            'style' => 'width:100%',
                            'placeholder' => __('lang_v1.all'),
                        ]) !!}
                    </div>
                </div>
            @endif
        @endcomponent
        @component('components.widget', ['class' => 'box-primary', 'title' => $page_title ?? __('lang_v1.all_sales')])
            @if((!empty($is_downpayment) && auth()->user()->can('downpayment.create')) ||
                (empty($is_downpayment) && auth()->user()->can('direct_sell.access')))
                @slot('tool')
                    <div class="box-tools">
                        <a class="tw-dw-btn tw-bg-gradient-to-r tw-from-indigo-600 tw-to-blue-500 tw-font-bold tw-text-white tw-border-none tw-rounded-full pull-right"
                            href="{{ $create_url ?? action([\App\Http\Controllers\SellController::class, 'create']) }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M12 5l0 14" />
                                <path d="M5 12l14 0" />
                            </svg> {{ $create_button_label ?? __('messages.add') }}
                        </a>
                    </div>
                @endslot
            @endif
            @if ((!empty($is_downpayment) && auth()->user()->hasAnyPermission([
                        'downpayment.view',
                        'downpayment.update',
                        'downpayment.fulfill',
                        'downpayment.delete',
                    ])) ||
                    (empty($is_downpayment) && (
                        auth()->user()->can('direct_sell.view') ||
                        auth()->user()->can('view_own_sell_only') ||
                        auth()->user()->can('view_commission_agent_sell')
                    )))
                @php
                    $custom_labels = json_decode(session('business.custom_labels'), true);
                @endphp
                <table class="table table-bordered table-striped ajax_view" id="sell_table">
                    <thead>
                        <tr>
                            <th class="confirmed-col no-print-export">Rcv</th>
                            <th class="no-print-export">@lang('messages.action')</th>
                            <th>@lang('messages.date')</th>
                            <th>Status</th>
                            <th>@lang('sale.invoice_no')</th>
                            <th>@lang('sale.customer_name')</th>
                            <th>@lang('lang_v1.location_no')</th>
                            <th>@lang('sale.location')</th>
                            <th>@lang('sale.payment_status')</th>
                            <th>@lang('lang_v1.payment_method')</th>
                            <th>@lang('lang_v1.payment_image')</th>
                            <th>@lang('sale.total_amount')</th>
                            <th>@lang('sale.total_paid')</th>
                            <th>@lang('lang_v1.store_credit_paid_amount')</th>
                            <th>@lang('lang_v1.sell_due')</th>
                            <th>Cash Refund</th>
                            <th>Store Credit</th>
                            <th>@lang('lang_v1.total_items')</th>
                            <th>@lang('lang_v1.types_of_service')</th>
                            <th>{{ $custom_labels['types_of_service']['custom_field_1'] ?? __('lang_v1.service_custom_field_1') }}
                            </th>
                            <th>{{ $custom_labels['sell']['custom_field_1'] ?? '' }}</th>
                            <th>{{ $custom_labels['sell']['custom_field_2'] ?? '' }}</th>
                            <th>{{ $custom_labels['sell']['custom_field_3'] ?? '' }}</th>
                            <th>{{ $custom_labels['sell']['custom_field_4'] ?? '' }}</th>
                            <th>@lang('lang_v1.added_by')</th>
                            <th>@lang('sale.sell_note')</th>
                            <th>@lang('sale.staff_note')</th>
                            <th class="no-print-export">@lang('sale.shipping_details')</th>
                            <th>@lang('restaurant.table')</th>
                            <th>@lang('restaurant.service_staff')</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr class="bg-gray font-17 footer-total text-center">
                            {{-- Keep footer cell count aligned with thead columns to avoid misaligned totals when scrolling. --}}
                            <td colspan="8"><strong>@lang('sale.total'):</strong></td>
                            <td class="footer_payment_status_count"></td>
                            <td class="payment_method_count"></td>
                            <td></td> {{-- payment_image --}}
                            <td class="footer_sale_total"></td>
                            <td class="footer_total_paid"></td>
                            <td class="footer_store_credit_paid_amount"></td>
                            <td class="footer_total_remaining"></td>
                            <td class="footer_total_sell_return_due"></td>
                            <td class="footer_total_store_credit"></td>
                            <td></td> {{-- total_items --}}
                            <td class="service_type_count"></td> {{-- types_of_service --}}
                            <td></td> {{-- service_custom_field_1 --}}
                            <td></td> {{-- custom_field_1 --}}
                            <td></td> {{-- custom_field_2 --}}
                            <td></td> {{-- custom_field_3 --}}
                            <td></td> {{-- custom_field_4 --}}
                            <td></td> {{-- added_by --}}
                            <td></td> {{-- sell_note --}}
                            <td></td> {{-- staff_note --}}
                            <td></td> {{-- shipping_details --}}
                            <td></td> {{-- table --}}
                            <td></td> {{-- service_staff --}}
                        </tr>
                    </tfoot>
                </table>
            @endif
        @endcomponent
    </section>
    <!-- /.content -->
    <div class="modal fade payment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>

    <div class="modal fade edit_payment_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>

    <!-- This will be printed -->
    <section class="invoice print_section" id="receipt_section">
        </section> 

@stop

@section('javascript')
    <script type="text/javascript">
        $(document).ready(function() {
            var sell_table = null;
            var SELL_LIST_COLUMN_KEYS = [
                'confirmed',
                'action',
                'transaction_date',
                'status',
                'invoice_no',
                'customer_name',
                'location_no',
                'business_location',
                'payment_status',
                'payment_methods',
                'payment_image',
                'final_total',
                'total_paid',
                'store_credit_paid_amount',
                'total_remaining',
                'return_due',
                'store_credit',
                'total_items',
                'types_of_service_name',
                'service_custom_field_1',
                'custom_field1',
                'custom_field2',
                'custom_field3',
                'custom_field4',
                'added_by',
                'additional_notes',
                'staff_note',
                'shipping_details',
                'table_name',
                'waiter',
            ];
            var SELL_LIST_DEFAULT_COLUMN_VISIBILITY = @json(data_get(session('business.common_settings'), 'default_column_visibility.' . (!empty($is_downpayment) ? 'all_downpayments' : 'all_sales'), []));

            // Function to update heading with date range
            function updateDateRangeHeading(start, end) {
                if (start && end) {
                    var formattedStart = start.format(moment_date_format);
                    var formattedEnd = end.format(moment_date_format);
                    $('#sell_list_selected_range').text(formattedStart + ' ~ ' + formattedEnd);
                } else {
                    $('#sell_list_selected_range').text(@json(__('lang_v1.all')));
                }
            }

            function reloadSellTable() {
                if (!sell_table) {
                    return;
                }

                if (typeof sell_table.__resetInfiniteScroll === 'function') {
                    sell_table.__resetInfiniteScroll(false);
                }
                sell_table.ajax.reload();
            }
            
            $('#sell_list_filter_date_range').daterangepicker(
                window.__getBusinessDefaultDateRange({
                    autoUpdateInput: false,
                    uposRestoreBeforeInit: true
                }),
                function(start, end) {
                    $('#sell_list_filter_date_range').val(
                        start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
                    );
                    updateDateRangeHeading(start, end);
                    reloadSellTable();
                }
            );
            var sellDatePicker = $('#sell_list_filter_date_range').data('daterangepicker');
            if (!$('#sell_list_filter_date_range').val() && sellDatePicker) {
                $('#sell_list_filter_date_range').val(
                    sellDatePicker.startDate.format(moment_date_format) + ' ~ ' +
                    sellDatePicker.endDate.format(moment_date_format)
                );
                updateDateRangeHeading(sellDatePicker.startDate, sellDatePicker.endDate);
            }
            $('#sell_list_filter_date_range').on('cancel.daterangepicker', function(ev, picker) {
                $('#sell_list_filter_date_range').val('');
                updateDateRangeHeading(null, null);
                reloadSellTable();
            });

            sell_table = $('#sell_table').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 25,
                lengthMenu: [
                    [25, 50, 100, 200],
                    [25, 50, 100, 200]
                ],
                fixedHeader:false,
                aaSorting: [
                    [2, 'desc']
                ],
                "ajax": {
                    "url": @json($list_ajax_url ?? '/sells'),
                    "data": function(d) {
                        if ($('#sell_list_filter_date_range').val()) {
                            var start = $('#sell_list_filter_date_range').data('daterangepicker')
                                .startDate.format('YYYY-MM-DD');
                            var end = $('#sell_list_filter_date_range').data('daterangepicker').endDate
                                .format('YYYY-MM-DD');
                            d.start_date = start;
                            d.end_date = end;
                        }
                        d.is_direct_sale = 1;
                        d.sub_type = @json($transaction_sub_type ?? null);

                        d.location_id = $('#sell_list_filter_location_id').val();
                        d.customer_id = $('#sell_list_filter_customer_id').val();
                        d.payment_status = $('#sell_list_filter_payment_status').val();
                        d.created_by = $('#created_by').val();
                        d.sales_cmsn_agnt = $('#sales_cmsn_agnt').val();
                        d.service_staffs = $('#service_staffs').val();

                        if ($('#shipping_status').length) {
                            d.shipping_status = $('#shipping_status').val();
                        }

                        if ($('#sell_list_filter_source').length) {
                            d.source = $('#sell_list_filter_source').val();
                        }

                        if ($('#only_subscriptions').is(':checked')) {
                            d.only_subscriptions = 1;
                        }

                        if ($('#payment_method').length) {
                            d.payment_method = $('#payment_method').val();
                        }

                        d = __datatable_ajax_callback(d);
                    }
                },
                scrollY: "75vh",
                scrollX: true,
                scrollCollapse: true,
                columns: [
                    { 
                        data: 'confirmed', 
                        name: 'confirmed', 
                        orderable: false, 
                        searchable: false 
                        
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        "searchable": false
                    },
                    {
                        data: 'transaction_date',
                        name: 'transaction_date'
                    },
                    {
                        data: 'status_badges',
                        name: 'status_badges',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'invoice_no',
                        name: 'invoice_no'
                    },
                    {
                        data: 'conatct_name',
                        name: 'conatct_name'
                    },
                    {
                        data: 'location_no',
                        name: 'transactions.location_no'
                    },
                    {
                        data: 'business_location',
                        name: 'bl.name'
                    },
                    {
                        data: 'payment_status',
                        name: 'payment_status'
                    },
                    {
                        data: 'payment_methods',
                        orderable: false,
                        "searchable": false
                    },
                    {
                        data: 'payment_image',
                        orderable: false,
                        "searchable": false
                    },
                    {
                        data: 'final_total',
                        name: 'final_total'
                    },
                    {
                        data: 'total_paid',
                        name: 'total_paid',
                        "searchable": false
                    },
                    {
                        data: 'store_credit_paid_amount',
                        name: 'store_credit_paid_amount',
                        orderable: false,
                        "searchable": false
                    },
                    {
                        data: 'total_remaining',
                        name: 'total_remaining'
                    },
                    {
                        data: 'return_due',
                        orderable: false,
                        "searchable": false
                    },
                    {
                        data: 'store_credit',
                        orderable: false,
                        "searchable": false
                    },
                    {
                        data: 'total_items',
                        name: 'total_items',
                        "searchable": false
                    },
                    {
                        data: 'types_of_service_name',
                        name: 'tos.name',
                        @if (empty($is_types_service_enabled))
                            visible: false
                        @endif
                    },
                    {
                        data: 'service_custom_field_1',
                        name: 'service_custom_field_1',
                        @if (empty($is_types_service_enabled))
                            visible: false
                        @endif
                    },
                    {
                        data: 'custom_field_1',
                        name: 'transactions.custom_field_1',
                        @if (empty($custom_labels['sell']['custom_field_1']))
                            visible: false
                        @endif
                    },
                    {
                        data: 'custom_field_2',
                        name: 'transactions.custom_field_2',
                        @if (empty($custom_labels['sell']['custom_field_2']))
                            visible: false
                        @endif
                    },
                    {
                        data: 'custom_field_3',
                        name: 'transactions.custom_field_3',
                        @if (empty($custom_labels['sell']['custom_field_3']))
                            visible: false
                        @endif
                    },
                    {
                        data: 'custom_field_4',
                        name: 'transactions.custom_field_4',
                        @if (empty($custom_labels['sell']['custom_field_4']))
                            visible: false
                        @endif
                    },
                    {
                        data: 'added_by',
                        name: 'u.first_name'
                    },
                    {
                        data: 'additional_notes',
                        name: 'additional_notes'
                    },
                    {
                        data: 'staff_note',
                        name: 'staff_note'
                    },
                    {
                        data: 'shipping_details',
                        name: 'shipping_details'
                    },
                    {
                        data: 'table_name',
                        name: 'tables.name',
                        @if (empty($is_tables_enabled))
                            visible: false
                        @endif
                    },
                    {
                        data: 'waiter',
                        name: 'ss.first_name',
                        @if (empty($is_service_staff_enabled))
                            visible: false
                        @endif
                    },
                ],
                "fnDrawCallback": function(oSettings) {
                    __currency_convert_recursively($('#sell_table'));
                },
                "footerCallback": function(row, data, start, end, display) {
                    var footer_sale_total = 0;
                    var footer_total_paid = 0;
                    var footer_store_credit_paid_amount = 0;
                    var footer_total_remaining = 0;
                    var footer_total_sell_return_due = 0;
                    var footer_total_store_credit = 0;
                    for (var r in data) {
                        footer_sale_total += $(data[r].final_total).data('orig-value') ? parseFloat($(
                            data[r].final_total).data('orig-value')) : 0;
                        footer_total_paid += $(data[r].total_paid).data('orig-value') ? parseFloat($(
                            data[r].total_paid).data('orig-value')) : 0;
                        footer_store_credit_paid_amount += $(data[r].store_credit_paid_amount).data('orig-value') ?
                            parseFloat($(data[r].store_credit_paid_amount).data('orig-value')) : 0;
                        footer_total_remaining += $(data[r].total_remaining).data('orig-value') ?
                            parseFloat($(data[r].total_remaining).data('orig-value')) : 0;
                        footer_total_sell_return_due += $(data[r].return_due).find('.sell_return_due')
                            .data('orig-value') ? parseFloat($(data[r].return_due).find(
                                '.sell_return_due').data('orig-value')) : 0;
                        footer_total_store_credit += $(data[r].store_credit).find('.sell_store_credit')
                            .data('orig-value') ? parseFloat($(data[r].store_credit).find(
                                '.sell_store_credit').data('orig-value')) : 0;
                    }

                    $('.footer_total_sell_return_due').html(__currency_trans_from_en(
                        footer_total_sell_return_due));
                    $('.footer_total_store_credit').html(__currency_trans_from_en(
                        footer_total_store_credit));
                    $('.footer_total_remaining').html(__currency_trans_from_en(footer_total_remaining));
                    $('.footer_total_paid').html(__currency_trans_from_en(footer_total_paid));
                    $('.footer_store_credit_paid_amount').html(__currency_trans_from_en(
                        footer_store_credit_paid_amount));
                    $('.footer_sale_total').html(__currency_trans_from_en(footer_sale_total));

                    $('.footer_payment_status_count').html(__count_status(data, 'payment_status'));
                    $('.service_type_count').html(__count_status(data, 'types_of_service_name'));
                    $('.payment_method_count').html(__count_status(data, 'payment_methods'));
                },
                createdRow: function(row, data, dataIndex) {
                    // Make Location column clickable (index shifts if columns are added/removed).
                    $(row).find('td:eq(6)').attr('class', 'clickable_td');
                    $(row).find('td:eq(0)').addClass('confirmed-col');
                }
            });

            window.__applyBusinessDefaultColumnVisibility(
                sell_table,
                SELL_LIST_COLUMN_KEYS,
                SELL_LIST_DEFAULT_COLUMN_VISIBILITY
            );

            $(document).on('change',
                '#sell_list_filter_location_id, #sell_list_filter_customer_id, #sell_list_filter_payment_status, #created_by, #sales_cmsn_agnt, #service_staffs, #shipping_status, #sell_list_filter_source, #payment_method',
                function() {
                    reloadSellTable();
                });

            $('#only_subscriptions').on('ifChanged', function(event) {
                reloadSellTable();
            });
        });
    </script>
    <script src="{{ asset('js/payment.js?v=' . $asset_v) }}"></script>
@endsection