@extends('layouts.horizontal', ['title' => 'Today\'s Invoices', 'topbarTitle' => 'Today\'s Invoices'])

@section('css')
@vite(['node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css',
'node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css',
'node_modules/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css',
'node_modules/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css',
'node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css',
'node_modules/datatables.net-select-bs5/css/select.bootstrap5.min.css',])
@endsection

@section('content')

<style>
     tr.strike-through > td {text-decoration:line-through !important; color:red;} 
</style>

<div class="Tinvoices ">
    <!-- start page title -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h2 class="mb-0">Today's Invoices</h2>
                <div class="page-title-right">
                     {{ session('user_role') }}
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
    
    <div class="row {{ session('user_role') != 'Super User' && session('user_role') != 'Super Admin' ? 'd-none' : '' }}">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="card-title">Filter Invoices</div>
                    <!-- <form id="invoicesform" method="GET" action="today_invoices/todayinvoicesdata"> -->
                        
                        <div class="row">                                            
                            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                                
                                <label class="form-label" for="invoiceDate">Select Date</label>
                                <input type="date" class="form-control" id="invoiceDate" name="start_date" value="{{ $today ?? date('Y-m-d') }}" placeholder="Select Date" required>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                                <button id="btn_refresh_table" type="button" class="btn btn-sm btn-primary mt-4" >Run</button>
                            </div>                            
                        </div>
                    <!-- </form> -->
                </div>
            </div>
        </div>
    </div> <!-- end row-->
    

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <table style="font-size: .753rem !important;" id="today-invoices-table"  class="table  dt-responsive nowrap w-100">
                                <thead>
                                    <tr>
                                        <th>Day Seq</th>
                                        <th>Invoice #</th>
                                        <th>ID Invoice</th>
                                        <th>Invoice Date</th>
                                        <th>Visit Date</th>
                                        <th>Customer</th>
                                        <th>Status</th>
                                        <th>Type</th>
                                        <th>Recovery</th>
                                        <th>Balance</th>
                                        <th>Paid Amount</th>
                                        <th>Advance Used</th>
                                        <th>Sub Total</th>
                                        <th>Other Charges</th>
                                        <th>Discount</th>
                                        <th>Gross Amount</th>
                                        <th>Taxes</th>
                                        <th>Net Amount</th>
                                        <th>Payment Mode</th>
                                        <th>Instrument</th>
                                        <th>Remarks</th>
                                        <th>Discount Remarks</th>
                                        <th>IMS</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="9" style="text-align:right">Totals:</th>
                                        <th></th> <!-- balance total -->
                                        <th></th> <!-- paid_amount total -->
                                        <th colspan="13"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    

                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div> <!-- end row-->
</div> <!-- end Tinvoices-->


@endsection

@section('scripts')

<script>
    $(document).ready(function() {
        //Today Invoices Datatable
        var table = $('#today-invoices-table').DataTable({
            scrollX:true,
            scrollY: 350,
            scrollCollapse: true,
            lengthChange: true,
            stateSave: true,
            
            ajax: {
                url: "{{ route('today_invoices.todayinvoicesdata') }}",
                data: function (d) {
                    d.start_date = $('#invoiceDate').val();   // custom parameter                    
                }
            },       
            fixedHeader: true,
            processing: true,
            serverSide: true,
            buttons: ['copy', 'print'],
            responsive: false,
            
            "language": {
                "paginate": {
                    "previous": "<i class='ti ti-chevron-left'>",
                    "next": "<i class='ti ti-chevron-right'>"
                }
            },
            "layout": {
                topStart: "buttons",
                topEnd: "search",
                bottomStart: {                 // page length selector
                    pageLength: {
                        menu: [[10, 25, 50, -1], [10, 25, 50, "Show all"]]
                    },
                    info: {}
                },                
                bottomEnd: "paging"       // pagination
            },
            lengthChange: true,   // show page length dropdown
            pageLength: 10,       // default rows per page
            searching: true,      // show search box
            info: true,           // show "Showing 1 to 10 of N entries"
            paging: true,         // show pagination
            buttons: [
                    { extend: "copy",  className: "btn btn-sm btn-soft-primary" },
                    { extend: "csv",   className: "btn btn-sm btn-soft-primary" },
                    { extend: "print", className: "btn btn-sm btn-soft-primary" },
                    { extend: "pdf", className: "btn btn-sm btn-soft-primary" }
                ],
            columns: [
                { data: 'invoice_day_seq', 
                    orderable: true, 
                    searchable: true,
                    name: 'invoice_day_seq' },
                { data: null, 
                    name: 'invoice_number',
                    orderable: true, 
                    searchable: true,
                    render: function (data, type, row) {
                        return `<a target="_blank" href="existing_service_invoice/${data.id_invoice}" class="link invoice-link" data-id="${row.id_invoice}">${data.invoice_number}</a>`;
                    }

                },
                { data: 'id_invoice', name: 'id_invoice' },
                { data: 'invoice_date_formatted', name: 'invoice_date_formatted' },
                { data: 'visit_time', name: 'visit_time' },
                { data: 'customer_name', name: 'customer_name' },
                { data: 'invoice_status', name: 'invoice_status' },
                { data: 'invoice_type', name: 'invoice_type' },
                { data: 'reference_invoice_number', name: 'reference_invoice_number' },
                { data: 'balance', name: 'balance' },
                { data: 'paid_amount', name: 'paid_amount' },
                { data: 'advance_amount', name: 'advance_amount' },
                { data: 'sub_total', name: 'sub_total' },
                { data: 'other_charges', name: 'other_charges' },
                { data: 'discount', name: 'discount' },
                { data: 'gross_amount', name: 'gross_amount' },
                { data: 'tax_total', name: 'tax_total' },  
                { data: 'net_amount', name: 'net_amount' },  
                { data: 'payment_mode', name: 'payment_mode' },  
                { data: 'instrument_number', name: 'instrument_number' },  
                { data: 'remarks', name: 'remarks' },  
                { data: 'discount_reason', name: 'discount_reason' },  
                { data: 'imsfiscal_invoice_number', name: 'imsfiscal_invoice_number' },
                // Actions column with button
                { 
                    data: null, 
                    name: 'actions', 
                    orderable: false, 
                    searchable: false,
                    render: function (data, type, row) {
                        let flag = row.invoice_type.toLowerCase();
                        var mRoute = "";
                        if(flag == 'service'){
                            mRoute = 'existing_service_invoice/';
                        } else {
                            mRoute = 'existing_retail_invoice/';
                        }
                        return `<a target="_blank" href="`+ mRoute +`${data.id_invoice}" class="btn flex-shrink-0 rounded-circle btn-icon btn-ghost-info open-btn" data-id="${row.id}">
                                    <iconify-icon icon="line-md:watch-loop" class="fs-20"></iconify-icon>
                                </a>
                                <button onclick="cancelinvoice('${data.id_invoice}', '${data.invoice_type}', '${data.imsfiscal_invoice_number}');" type="button" class="btn flex-shrink-0 rounded-circle btn-icon btn-ghost-danger" data-id="${row.id}">
                                    <iconify-icon icon="solar:trash-bin-trash-bold-duotone" class="fs-20"></iconify-icon>
                                </button>`;


                    }
                }
                

            ],
            "drawCallback": function () {
                $('.dataTables_paginate > .pagination').addClass('pagination-rounded');
                $('.dataTables_paginate > .pagination').addClass('btn-dark');
            },
            "rowCallback": function(row, data, displayNum, displayIndex, dataIndex) {
                // 'row' is the TR element for the current row
                // 'data' is the data array/object for the current row
                // 'displayNum' is the row number in the current page of displayed rows
                // 'displayIndex' is the row index in the current page of displayed rows
                // 'dataIndex' is DataTables' internal index for the row (useful for accessing data via API)

                // Strike Through rows where a specific data field meets a condition
                if (data.invoice_status != 'valid') {
                    $(row).addClass('strike-through'); // Add a class to the row
                }

                if(data.reference_invoice_number != '') {
                    //$('td:eq(7)', row).addClass('badge bg-primary  mt-2'); // Change text color of the 8th column (index 7)
                    //$('td:eq(7)', row).css('color', 'white'); // Change text color of the 8th column (index 7)
                    $('td:eq(7)', row).html('<span class="badge bg-primary ">Recovery</span>'); // Change text color of the 8th column (index 7)
                    
                }

                // Example: Add an icon to the first column
                //$('td:eq(0)', row).prepend('<span class="info-icon"></span>');
            },
            "footerCallback": function (row, data, start, end, display) {
                var api = this.api();

                // grab server totals
                var totals = api.ajax.json().totals;

                // balance is column index 8
                $(api.column(9).footer()).html(
                    totals ? totals.balance : 0
                );

                // paid_amount is column index 9
                $(api.column(10).footer()).html(
                    totals ? totals.paid_amount : 0
                );
            }

        });

        $('#btn_refresh_table').click(function() {
           // table.draw();
            table.ajax.reload(); 
        });

    });

   
    //////////////////////Open Invoice and Cancel Invoice Functions//////////////////////        
    function cancelinvoice(invoiceid, invoice_type, imsfiscal_invoice_number){
        //Warning Message
        Swal.fire({
                input: "text",
                inputLabel: "Give Reason For Cancelling This Invoice:",
                inputPlaceholder: "Reason for cancelling...",
                inputAttributes: {
                    "aria-label": "Reason for cancelling"
                },
                showCancelButton: true,
                icon: "question",
                customClass: {
                    confirmButton: 'btn btn-primary me-2',
                    cancelButton: 'btn btn-secondary'
                },
                buttonsStyling: false // important so Swal doesn’t override your Bootstrap classes
            }).then((result) => {
                if (result.isConfirmed) {
                    var reason = result.value;
                    if (reason == "") {
                        Swal.fire({
                            title: "Oops!",
                            text: "You need to write something!",
                            icon: "error",
                            customClass: {
                                confirmButton: "btn btn-danger"
                            }
                        });
                        return false;
                    } else {
                        //Check if imsfiscal number is present (posted invoice)
                        //console.log(imsfiscal_invoice_number);
                        if(imsfiscal_invoice_number && imsfiscal_invoice_number !== 'null'){
                            Swal.fire({
                                title: "Oops!",
                                text: "Connected with IMS Fiscal. You Cannot Cancel Invoices!",
                                icon: "error",
                                customClass: {
                                    confirmButton: "btn btn-danger"
                                }
                            });
                            return false;
                        }

                        // Proceed with cancellation
                        $.ajax({
                            type: 'POST',
                            url: "{{ route('cancel_invoice') }}",
                            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                            dataType: 'json',
                            data: {id_invoice: invoiceid, cancel_reason: reason},
                            success: function(data) {
                                var btn= "btn btn-" +  data.message_btn;
                                Swal.fire({
                                    icon: data.message_type,
                                    buttonsStyling: false,
                                    confirmButtonText: "Ok",
                                    customClass: {
                                        confirmButton: btn
                                    }
                                });
                                if(data.message_type == 'success'){
                                    //Refresh Datatable
                                    var table = $('#today-invoices-table').DataTable();
                                    table.ajax.reload(); 
                                }
                            }
                        });
                    }
                }
        });
        
    }

    function openinvoice(invoiceid){
        $.ajax({
                type: 'POST',
                url: "{{ route('any', 'open_invoice') }}",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                dataType: 'json',
                data: {invoiceid: invoiceid},
                success: function(data) {
                    
                }
            });
    }




</script>

@endsection