@extends('admin.layouts.master')
@section('title', 'Sale Invoices | Vogue Technics')

@section('content')
    <section>
        <div class="card">
            <div class="card-datatable table-responsive pt-0">
                <table class="table" id="saleInvoicesTable">
                    <thead>
                        <tr>
                            <th class="not_include"></th>
                            <th>Sr #</th>
                            <th>Invoice No</th>
                            <th>Date</th>
                            {{-- <th>Customer</th> --}}
                            <th>VRM</th>
                            <th>Website</th>
                            <th>Status</th>
                            <th>Total</th>
                            <th>Created By</th>
                            <th>Updated By</th>
                            <th class="not_include">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            let tableTitle = document.createElement('h5');
            tableTitle.classList.add('card-title', 'mb-0', 'text-md-start', 'text-center', 'pb-md-0', 'pb-6');
            tableTitle.innerHTML = 'List of Sale Invoices';

            $('#saleInvoicesTable').DataTable({
                processing: false,
                serverSide: true,
                responsive: true,
                ajax: "{{ route('sale-invoices.invoice.index') }}",
                columns: [{
                        data: ''
                    },
                    {
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'sale_number',
                        render: function(data, type, full) {
                            return '<span class="badge rounded-pill bg-success text-nowrap">' + full.sale_number + '</span>';
                        }
                    },
                    {
                        data: 'date'
                    },
                    // {
                    //     data: 'name'
                    // },
                    {
                        data: 'vrm'
                    },
                    {
                        data: 'website_logo',
                        orderable: false,
                        render: function(data, type, full) {
                            if (!full.website_logo) {
                                return 'N/A';
                            }

                            let baseUrl = "{{ asset('') }}";
                            return `<div class="avatar avatar-sm me-4"><img src="${baseUrl}${full.website_logo}" alt="Website" class="rounded-circle"></div>`;
                        }
                    },
                    {
                        data: 'status_badge',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'total'
                    },
                    {
                        data: 'created_by_name',
                        orderable: false
                    },
                    {
                        data: 'updated_by_name',
                        orderable: false
                    },
                    {
                        data: null
                    }
                ],
                columnDefs: [{
                        className: 'control',
                        orderable: false,
                        searchable: false,
                        responsivePriority: 2,
                        targets: 0,
                        render: function() {
                            return '';
                        }
                    },
                    {
                        targets: -1,
                        title: 'Actions',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, full) {
                            const baseUrl = "{{ url('sale-invoices/invoice') }}";
                            const editUrl = baseUrl + '/' + full.id + '/edit';
                            const viewUrl = baseUrl + '/' + full.id;
                            const printUrl = baseUrl + '/' + full.id + '/print';
                            const deleteUrl = baseUrl + '/' + full.id;
                            const markPaidUrl = "{{ route('sale-invoices.invoice.mark-paid', ':id') }}".replace(':id', full.id);
                            let buttons = '';

                            if (full.status !== 'paid') {
                                @can('edit-sale-invoice')
                                    buttons += '<a href="' + editUrl + '" class="btn btn-text-secondary rounded-pill btn-icon" title="Edit Invoice"><i class="icon-base ti tabler-edit"></i></a>';
                                @endcan
                            }

                            buttons += '<a href="' + viewUrl + '" class="btn btn-text-info rounded-pill btn-icon" title="View Invoice"><i class="icon-base ti tabler-eye"></i></a>';
                            buttons += '<a href="' + printUrl + '" target="_blank" class="btn btn-text-primary rounded-pill btn-icon" title="Print Invoice"><i class="icon-base ti tabler-printer"></i></a>';

                            if (full.status !== 'paid') {
                                @can('mark-as-paid')
                                    buttons += '<a href="javascript:void(0)" class="btn btn-text-success rounded-pill btn-icon markInvoicePaid" data-url="' + markPaidUrl + '" data-table="saleInvoicesTable" title="Mark As Paid"><i class="icon-base ti tabler-cash-banknote"></i></a>';
                                @endcan

                                @can('delete-sale-invoice')
                                    buttons += '<a href="javascript:void(0)" class="btn btn-text-danger rounded-pill btn-icon deleteRow" data-url="' + deleteUrl + '" data-table="saleInvoicesTable" title="Delete Invoice"><i class="icon-base ti tabler-trash"></i></a>';
                                @endcan
                            }
                            
                            return buttons;
                        }
                    }
                ],
                order: [
                    [1, 'desc']
                ],
                layout: {
                    top2Start: {
                        rowClass: 'row card-header flex-column flex-md-row border-bottom mx-0 px-3',
                        features: [tableTitle]
                    },
                    topStart: {
                        rowClass: 'row mx-0 px-3 my-0 justify-content-between border-bottom',
                        features: [{
                            pageLength: {
                                menu: [10, 25, 50, 75, 100],
                                text: 'Show_MENU_entries'
                            }
                        }]
                    },
                    topEnd: {
                        search: {
                            placeholder: ''
                        }
                    },
                    bottomStart: {
                        rowClass: 'row mx-3 justify-content-between',
                        features: ['info']
                    },
                    bottomEnd: 'paging'
                },
                language: {
                    paginate: {
                        next: '<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl icon-18px"></i>',
                        previous: '<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl icon-18px"></i>',
                        first: '<i class="icon-base ti tabler-chevrons-left scaleX-n1-rtl icon-18px"></i>',
                        last: '<i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl icon-18px"></i>'
                    }
                },
                responsive: {
                    details: {
                        type: 'column',
                    }
                }
            });

            $(document).on('click', '.markInvoicePaid', function(e) {
                e.preventDefault();

                const url = $(this).data('url');
                const tableId = $(this).data('table');

                Swal.fire({
                    title: 'Mark invoice as paid?',
                    text: 'This will mark the invoice as paid and move the quote to sold.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, mark as paid',
                    customClass: {
                        confirmButton: 'btn btn-success me-3 waves-effect waves-light',
                        cancelButton: 'btn btn-label-secondary waves-effect waves-light'
                    },
                    buttonsStyling: false
                }).then(function(result) {
                    if (!result.value) {
                        return;
                    }

                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            ShowToast('success', response.message);
                            reloadDataTable(tableId);
                        },
                        error: function(jqXHR) {
                            if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
                                ShowToast('error', jqXHR.responseJSON.message);
                                return;
                            }

                            ShowToast('error', 'An error occurred! Please contact the administrator.');
                        }
                    });
                });
            });
        });
    </script>
@endsection