@extends('layouts/layoutMaster')

@section('title', 'Invoice List - Pages')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>

@endsection

@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">Biilings</span>
    </h4>

    <!-- Invoice List Widget -->

    <div class="card mb-4">
        <div class="card-widget-separator-wrapper">
            <div class="card-body card-widget-separator">
                <div class="row gy-4 gy-sm-1">
                    <div class="col-sm-6 col-lg-3">
                        <div class="d-flex justify-content-between align-items-start card-widget-1 border-end pb-3 pb-sm-0">
                            <div>
                                <h3 class="mb-1">24</h3>
                                <p class="mb-0">Clients</p>
                            </div>
                            <span class="avatar me-sm-4">
                                <span class="avatar-initial bg-label-secondary rounded"><i
                                        class="ti ti-user ti-md"></i></span>
                            </span>
                        </div>
                        <hr class="d-none d-sm-block d-lg-none me-4">
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="d-flex justify-content-between align-items-start card-widget-2 border-end pb-3 pb-sm-0">
                            <div>
                                <h3 class="mb-1">165</h3>
                                <p class="mb-0">Invoices</p>
                            </div>
                            <span class="avatar me-lg-4">
                                <span class="avatar-initial bg-label-secondary rounded"><i
                                        class="ti ti-file-invoice ti-md"></i></span>
                            </span>
                        </div>
                        <hr class="d-none d-sm-block d-lg-none">
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="d-flex justify-content-between align-items-start border-end pb-3 pb-sm-0 card-widget-3">
                            <div>
                                <h3 class="mb-1">USD 2.46k</h3>
                                <p class="mb-0">Paid</p>
                            </div>
                            <span class="avatar me-sm-4">
                                <span class="avatar-initial bg-label-secondary rounded"><i
                                        class="ti ti-checks ti-md"></i></span>
                            </span>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h3 class="mb-1">USD 876</h3>
                                <p class="mb-0">Unpaid</p>
                            </div>
                            <span class="avatar">
                                <span class="avatar-initial bg-label-secondary rounded"><i
                                        class="ti ti-circle-off ti-md"></i></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Invoice List Table -->
    <div class="card">
        <div class="card-datatable table-responsive">
            <table class="invoice-list-table table border-top">
                <thead>
                    <tr>
                        <th></th>
                        <th>#ID</th>
                        <th><i class='ti ti-trending-up text-secondary'></i></th>
                        <th>Client</th>
                        <th>Total</th>
                        <th class="text-truncate">Issued Date</th>
                        <th>Balance</th>
                        <th>Invoice Status</th>
                        <th class="cell-fit">Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

@endsection

@section('page-script')
    <!-- <script src="{{ asset('assets/js/app-invoice-list.js') }}"></script> -->
    <script>
        $(function() {
            // Variable declaration for table
            var dt_invoice_table = $('.invoice-list-table');

            // Invoice datatable
            if (dt_invoice_table.length) {
                var dt_invoice = dt_invoice_table.DataTable({
                    ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
                    columns: [
                        // columns according to JSON
                        {
                            data: ''
                        },
                        {
                            data: 'invoice_id'
                        },
                        {
                            data: 'invoice_status'
                        },
                        {
                            data: 'issued_date'
                        },
                        {
                            data: 'client_name'
                        },
                        {
                            data: 'total'
                        },
                        {
                            data: 'balance'
                        },
                        {
                            data: 'invoice_status'
                        },
                        {
                            data: 'action'
                        }
                    ],
                    columnDefs: [{
                            // For Responsive
                            className: 'control',
                            responsivePriority: 2,
                            searchable: false,
                            targets: 0,
                            render: function(data, type, full, meta) {
                                return '';
                            }
                        },
                        {
                            // Invoice ID
                            targets: 1,
                            render: function(data, type, full, meta) {
                                var $invoice_id = full['invoice_id'];
                                // Creates full output for row
                                // var $row_output = '<a href="' + baseUrl + 'app/invoice/preview">#' + $invoice_id + '</a>';
                                var $row_output = '<a href="' + baseUrl + 'finances/invoices/1">#' +
                                    $invoice_id + '</a>';
                                return $row_output;
                            }
                        },
                        {
                            // Invoice status
                            targets: 2,
                            render: function(data, type, full, meta) {
                                var $invoice_status = full['invoice_status'],
                                    $due_date = full['due_date'],
                                    $balance = full['balance'];
                                var roleBadgeObj = {
                                    Sent: '<span class="badge badge-center rounded-pill bg-label-secondary w-px-30 h-px-30"><i class="ti ti-circle-check ti-sm"></i></span>',
                                    Draft: '<span class="badge badge-center rounded-pill bg-label-primary w-px-30 h-px-30"><i class="ti ti-device-floppy ti-sm"></i></span>',
                                    'Past Due': '<span class="badge badge-center rounded-pill bg-label-danger w-px-30 h-px-30"><i class="ti ti-info-circle ti-sm"></i></span>',
                                    'Partial Payment': '<span class="badge badge-center rounded-pill bg-label-success w-px-30 h-px-30"><i class="ti ti-circle-half-2 ti-sm"></i></span>',
                                    Paid: '<span class="badge badge-center rounded-pill bg-label-warning w-px-30 h-px-30"><i class="ti ti-chart-pie ti-sm"></i></span>',
                                    Downloaded: '<span class="badge badge-center rounded-pill bg-label-info w-px-30 h-px-30"><i class="ti ti-arrow-down-circle ti-sm"></i></span>'
                                };
                                return (
                                    "<span data-bs-toggle='tooltip' data-bs-html='true' title='<span>" +
                                    $invoice_status +
                                    '<br> <span class="fw-medium">Balance:</span> ' +
                                    $balance +
                                    '<br> <span class="fw-medium">Due Date:</span> ' +
                                    $due_date +
                                    "</span>'>" +
                                    roleBadgeObj[$invoice_status] +
                                    '</span>'
                                );
                            }
                        },
                        {
                            // Client name and Service
                            targets: 3,
                            responsivePriority: 4,
                            render: function(data, type, full, meta) {
                                var $name = full['client_name'],
                                    $service = full['service'],
                                    $image = full['avatar_image'],
                                    $rand_num = Math.floor(Math.random() * 11) + 1,
                                    $user_img = $rand_num + '.png';
                                if ($image === true) {
                                    // For Avatar image
                                    var $output =
                                        '<img src="' + assetsPath + 'img/avatars/' + $user_img +
                                        '" alt="Avatar" class="rounded-circle">';
                                } else {
                                    // For Avatar badge
                                    var stateNum = Math.floor(Math.random() * 6),
                                        states = ['success', 'danger', 'warning', 'info', 'primary',
                                            'secondary'
                                        ],
                                        $state = states[stateNum],
                                        $name = full['client_name'],
                                        $initials = $name.match(/\b\w/g) || [];
                                    $initials = (($initials.shift() || '') + ($initials.pop() ||
                                        '')).toUpperCase();
                                    $output =
                                        '<span class="avatar-initial rounded-circle bg-label-' +
                                        $state + '">' + $initials + '</span>';
                                }
                                // Creates full output for row
                                var $row_output =
                                    '<div class="d-flex justify-content-start align-items-center">' +
                                    '<div class="avatar-wrapper">' +
                                    '<div class="avatar me-2">' +
                                    $output +
                                    '</div>' +
                                    '</div>' +
                                    '<div class="d-flex flex-column">' +
                                    '<a href="' +
                                    baseUrl +
                                    'pages/profile-user" class="text-body text-truncate"><span class="fw-medium">' +
                                    $name +
                                    '</span></a>' +
                                    '<small class="text-truncate text-muted">' +
                                    $service +
                                    '</small>' +
                                    '</div>' +
                                    '</div>';
                                return $row_output;
                            }
                        },
                        {
                            // Total Invoice Amount
                            targets: 4,
                            render: function(data, type, full, meta) {
                                var $total = full['total'];
                                return '<span class="d-none">' + $total + '</span>$' + $total;
                            }
                        },
                        {
                            // Due Date
                            targets: 5,
                            render: function(data, type, full, meta) {
                                var $due_date = new Date(full['due_date']);
                                // Creates full output for row
                                var $row_output =
                                    '<span class="d-none">' +
                                    moment($due_date).format('YYYYMMDD') +
                                    '</span>' +
                                    moment($due_date).format('DD MMM YYYY');
                                $due_date;
                                return $row_output;
                            }
                        },
                        {
                            // Client Balance/Status
                            targets: 6,
                            orderable: false,
                            render: function(data, type, full, meta) {
                                var $balance = full['balance'];
                                if ($balance === 0) {
                                    var $badge_class = 'bg-label-success';
                                    return '<span class="badge ' + $badge_class +
                                        '" text-capitalized> Paid </span>';
                                } else {
                                    return '<span class="d-none">' + $balance + '</span>' +
                                        $balance;
                                }
                            }
                        },
                        {
                            targets: 7,
                            visible: false
                        },
                        {
                            // Actions
                            targets: -1,
                            title: 'Actions',
                            searchable: false,
                            orderable: false,
                            render: function(data, type, full, meta) {
                                return (
                                    '<div class="d-flex align-items-center">' +
                                    '<a href="javascript:;" data-bs-toggle="tooltip" class="text-body" data-bs-placement="top" title="Send Mail"><i class="ti ti-mail mx-2 ti-sm"></i></a>' +
                                    '<a href="' +
                                    baseUrl +
                                    'finances/invoices/1" data-bs-toggle="tooltip" class="text-body" data-bs-placement="top" title="Preview Invoice"><i class="ti ti-eye mx-2 ti-sm"></i></a>' +
                                    '<div class="dropdown">' +
                                    '<a href="javascript:;" class="btn dropdown-toggle hide-arrow text-body p-0" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-sm"></i></a>' +
                                    '<div class="dropdown-menu dropdown-menu-end">' +
                                    '<a href="javascript:;" class="dropdown-item">Download</a>' +
                                    '<a href="' +
                                    baseUrl +
                                    'app/invoice/edit" class="dropdown-item">Edit</a>' +
                                    '<a href="javascript:;" class="dropdown-item">Duplicate</a>' +
                                    '<div class="dropdown-divider"></div>' +
                                    '<a href="javascript:;" class="dropdown-item delete-record text-danger">Delete</a>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>'
                                );
                            }
                        }
                    ],
                    order: [
                        [1, 'desc']
                    ],
                    dom: '<"row mx-1"' +
                        '<"col-12 col-md-6 d-flex align-items-center justify-content-center justify-content-md-start gap-2"l<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start mt-md-0 mt-3"B>>' +
                        '<"col-12 col-md-6 d-flex align-items-center justify-content-end flex-column flex-md-row pe-3 gap-md-3"f<"invoice_status mb-3 mb-md-0">>' +
                        '>t' +
                        '<"row mx-2"' +
                        '<"col-sm-12 col-md-6"i>' +
                        '<"col-sm-12 col-md-6"p>' +
                        '>',
                    language: {
                        sLengthMenu: 'Show _MENU_',
                        search: '',
                        searchPlaceholder: 'Search'
                    },
                    // Buttons with Dropdown
                    buttons: [
                        // {
                        // text: '<i class="ti ti-plus me-md-1"></i><span class="d-md-inline-block d-none">Create Invoice</span>',
                        // className: 'btn btn-primary',
                        // action: function (e, dt, button, config) {
                        //     window.location = baseUrl + 'app/invoice/add';
                        // }
                        // }
                    ],
                    // For responsive popup
                    responsive: {
                        details: {
                            display: $.fn.dataTable.Responsive.display.modal({
                                header: function(row) {
                                    var data = row.data();
                                    return 'Details of ' + data['full_name'];
                                }
                            }),
                            type: 'column',
                            renderer: function(api, rowIdx, columns) {
                                var data = $.map(columns, function(col, i) {
                                    return col.title !==
                                        '' // ? Do not show row in modal popup if title is blank (for check box)
                                        ?
                                        '<tr data-dt-row="' +
                                        col.rowIndex +
                                        '" data-dt-column="' +
                                        col.columnIndex +
                                        '">' +
                                        '<td>' +
                                        col.title +
                                        ':' +
                                        '</td> ' +
                                        '<td>' +
                                        col.data +
                                        '</td>' +
                                        '</tr>' :
                                        '';
                                }).join('');

                                return data ? $('<table class="table"/><tbody />').append(data) : false;
                            }
                        }
                    },
                    initComplete: function() {
                        // Adding role filter once table initialized
                        this.api()
                            .columns(7)
                            .every(function() {
                                var column = this;
                                var select = $(
                                        '<select id="UserRole" class="form-select"><option value=""> Select Status </option></select>'
                                    )
                                    .appendTo('.invoice_status')
                                    .on('change', function() {
                                        var val = $.fn.dataTable.util.escapeRegex($(this)
                                            .val());
                                        column.search(val ? '^' + val + '$' : '', true, false)
                                            .draw();
                                    });

                                column
                                    .data()
                                    .unique()
                                    .sort()
                                    .each(function(d, j) {
                                        select.append('<option value="' + d +
                                            '" class="text-capitalize">' + d + '</option>');
                                    });
                            });
                    }
                });
            }

            // On each datatable draw, initialize tooltip
            dt_invoice_table.on('draw.dt', function() {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll(
                    '[data-bs-toggle="tooltip"]'));
                var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl, {
                        boundary: document.body
                    });
                });
            });

            // Delete Record
            $('.invoice-list-table tbody').on('click', '.delete-record', function() {
                dt_invoice.row($(this).parents('tr')).remove().draw();
            });

            // Filter form control to default size
            // ? setTimeout used for multilingual table initialization
            setTimeout(() => {
                $('.dataTables_filter .form-control').removeClass('form-control-sm');
                $('.dataTables_length .form-select').removeClass('form-select-sm');
            }, 300);
        });
    </script>
@endsection