{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
            <!--begin::Search-->
            <div class="d-flex align-items-center position-relative my-1">
                <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
            </div>
            <!--end::Search-->
            <!--begin::Export buttons-->
            <div id="kt_datatable_example_1_export" class="d-none"></div>
            <!--end::Export buttons-->
        </div>
        <div class="card-toolbar">
            @if($has_permission_to_create_invoice_for_participant_master_screen??false)
            <!--begin::Button-->
            <a href="javascript:;" class="btn btn-primary btn-sm btn_list_add btn-hover-rise me-5 btn_show_invoice_preview">
                <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/keenthemes/metronic/docs/core/html/src/media/icons/duotune/finance/fin008.svg-->
                <span class="svg-icon svg-icon-muted svg-icon-2x"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.3" d="M3.20001 5.91897L16.9 3.01895C17.4 2.91895 18 3.219 18.1 3.819L19.2 9.01895L3.20001 5.91897Z" fill="currentColor" />
                        <path opacity="0.3" d="M13 13.9189C13 12.2189 14.3 10.9189 16 10.9189H21C21.6 10.9189 22 11.3189 22 11.9189V15.9189C22 16.5189 21.6 16.9189 21 16.9189H16C14.3 16.9189 13 15.6189 13 13.9189ZM16 12.4189C15.2 12.4189 14.5 13.1189 14.5 13.9189C14.5 14.7189 15.2 15.4189 16 15.4189C16.8 15.4189 17.5 14.7189 17.5 13.9189C17.5 13.1189 16.8 12.4189 16 12.4189Z" fill="currentColor" />
                        <path d="M13 13.9189C13 12.2189 14.3 10.9189 16 10.9189H21V7.91895C21 6.81895 20.1 5.91895 19 5.91895H3C2.4 5.91895 2 6.31895 2 6.91895V20.9189C2 21.5189 2.4 21.9189 3 21.9189H19C20.1 21.9189 21 21.0189 21 19.9189V16.9189H16C14.3 16.9189 13 15.6189 13 13.9189Z" fill="currentColor" />
                    </svg>
                </span>
                <!--end::Svg Icon-->
                Create Invoice</a>
            <!--end::Button-->
            @endif
            <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                <!--end::Filter-->
                <!--begin::Export dropdown-->
                <button type="button" class="btn btn-light-primary me-5" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                    <span class="svg-icon svg-icon-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="currentColor"></rect>
                            <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="currentColor"></path>
                            <path d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="#C4C4C4"></path>
                        </svg>
                    </span>
                    Export
                </button>
                <!--begin::Menu-->
                <div id="kt_datatable_example_1_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="copy">
                            Copy to clipboard
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="excel">
                            Export as Excel
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="csv">
                            Export as CSV
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="pdf">
                            Export as PDF
                        </a>
                    </div>
                    <!--end::Menu item-->
                </div>
                <!--end::Menu-->
                <!--end::Export dropdown-->
            </div>
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        @include("backend.alerts")
        <div class="row">
            <div class="col-xl-2"></div>
            <div class="col-xl-12 my-2">
                <div class="form-group row mb-7">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <label>Type:</label>
                        <select class="form-control form-control-solid required input-type form-select" {{$isDisabled}} name="type">
                            @foreach($typeList as $code => $name)
                            <option value="{{$code}}" {{($type ?? 'fortnightly') == $code ? "selected": ""}}>{{$name}}</option>
                            @endforeach
                        </select>
                        @if($isDisabled)
                        <input class="input-type" type="hidden" name="type" value="{{$type ?? 'fortnightly'}}" />
                        @endif
                    </div>
                </div>
                <div class="form-group row mb-7">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <label>Month:</label>
                        <select class="form-control form-control-solid required input-month form-select" {{$isDisabled}} name="month">
                            <option value="">Select Month </option>
                            @foreach($monthList as $code => $name)
                            <option value="{{$code}}" {{$month == $code ? "selected": ""}}>{{$name}}</option>
                            @endforeach
                        </select>
                        @if($isDisabled)
                        <input type="hidden" name="month" value="{{$month}}" />
                        @endif
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <label>Year:</label>
                        <select class="form-control form-control-solid required input-year form-select" name="year" {{$isDisabled}}>
                            <option value="">Select Year </option>
                            @foreach($yearList as $code => $name)
                            <option value="{{$name}}" {{$year == $name ? "selected": ""}}>{{$name}}</option>
                            @endforeach
                        </select>
                        @if($isDisabled)
                        <input type="hidden" name="year" value="{{$year}}" />
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!--end::Row-->

        @if(!empty($year) && !empty($month))

        <!--begin::Row-->
        <div class="row">
            <div class="col-xl-2"></div>
            <div class="col-xl-12 my-2">
                <div class="form-group row mb-7">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <label>Week Start Date:</label>
                        <select class="form-control form-control-solid input-weekstart form-select  filter-date" {{$isDisabled}} name="fromDate" value="{{$data['weekstart']??''}}">
                            <option value="">Select Week Date </option>
                            @foreach($week_start as $code => $weekid)

                            <option value="{{$weekid}}" {{$weekDate==$weekid?'selected':''}}>{{$code}}</option>
                            @endforeach
                        </select>

                        <input type="hidden" class="input-from-date" value="{{$weekstart??''}}" />

                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <label>Week End Date:</label>
                        <input class="form-control form-control-lg form-control-solid input-weekend input-to-date filter-date" type="text" name="toDate" value="{{$weekEndDate??''}}" readonly />
                    </div>
                </div>

            </div>
        </div>
        <!--end::Row-->

        @endif

        <!--begin: Datatable-->
        {!! $html->table() !!}
        <!--end: Datatable-->
    </div>
    <!--end::Body-->
</div>
<!--end::Card-->
@include('backend.roster_client_v2.client_roster_master.invoice_modal')
@endsection


{{-- Scripts Section --}}
@section('scripts')

<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{asset('vendor/datatables/buttons.server-side.js')}}"></script>
{!! $html->scripts() !!}
<script type="text/javascript">
    blockUI = new KTBlockUI(document.querySelector('#kt_activities'));
    $('#kt_header_menu_wrapper').attr('style', 'visibility:hidden;');

    $(document).on('change', '.input-type, .input-month, .input-year', function() {
        var type = $('.input-type').val();
        var month = $('.input-month').val();
        var year = $('.input-year').val();
        var url = "{{$pageUrl}}";
        url = url + "?type=" + type + "&year=" + year + "&month=" + month;        
        window.location.href = url;
    });

    $(document).on('change', '.input-weekstart', function() {
        var type = $('.input-type').val();
        var month = $('.input-month').val();
        var year = $('.input-year').val();
        var week = $('.input-weekstart').val() || "";
        var url = "{{$pageUrl}}";
        url = url + "?type=" + type + "&year=" + year + "&month=" + month + "&week=" + week;        
        window.location.href = url;
    });

    function actionDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('team_roster_client_report.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    $(document).on('change', '.select_all_clients_checkbox', function() {
        if ($(this).prop('checked')) {
            $('.select_clients_checkbox').each(function() {
                $(this)[0].checked = true;
            });
            $('.select_clients_checkbox').attr('checked', true);
        } else {
            $('.select_clients_checkbox').each(function() {
                $(this)[0].checked = false;
            });
            $('.select_clients_checkbox').removeAttr('checked');
        }
    });

    $(document).on('click', '.btn_show_invoice_preview', function() {
        clientInvoicePreview();
    });

    function clientInvoicePreview() {
        if ($('.select_clients_checkbox:checked').length == 0) {
            Swal.fire({
                "text": 'Please choose at least one client to generate an invoice!',
                "icon": "info",
                "showCancelButton": false
            });
        } else {
            blockUI.block();
            var rsmIds = [];
            var clientIds = [];
            $('.select_clients_checkbox:checked').each(function() {
                if ($(this).data('is_roster_id') == 1) {
                    rsmIds.push($(this).val());
                } else {
                    clientIds.push($(this).val());
                }
            });

            var weekStart = $('.input-weekstart').find('option:selected').text() || "";
            var weekEnd = $('.input-weekend').val() || "";
            var type = $('.input-type').val();

            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: {
                    "rsmIds": rsmIds,
                    "clientIds": clientIds,
                    "fromDate": weekStart,
                    "toDate": weekEnd,
                    "type": type,
                    "_token": "{{ csrf_token() }}",
                },
                url: "{!! route('team_roster_client_report.invoice') !!}",
                success: function(data) {
                    blockUI.release();
                    if (data.status) {                        
                        // $('.btn_submit_invoice').hide();
                        $('#invoic_preview_modal .modal-title:first').html("Invoice Preview");
                        $('.invoic_preview_modal_body').html(data['html']);
                        $('#invoic_preview_modal').modal('show');
                        if(data['invoice_count'] == 0) {
                            $('.btn_submit_invoice').hide();
                            $('.invoic_preview_modal_body').html('<div class="alert alert-danger">No invoice data found for the selected clients. Please configure participant rate settings!</div>');
                        } else if (data['invoice_count'] == 1) {
                            if (data['xero_link_status'] == 0) {
                                // Hide send_xero button if participant is not linked with Xero
                                $('.btn_submit_invoice[data-type="send_xero"]').hide();
                            } else {
                                $('.btn_submit_invoice[data-type="send_xero"]').show();
                            }
                        } else {
                            $('.btn_submit_invoice').show();
                        }
                    } else {
                        Swal.fire({
                            "text": data.msg,
                            "icon": "error",
                            "showCancelButton": false
                        });
                    }
                },
                error: function(error) {
                    blockUI.release();
                }
            });
        }
    }

    $(document).on('click', '.btn_submit_invoice', function () {
        let invoiceGroups = [];
        blockUI.block();
        let type = $(this).data('type');

        $('.invoice-section').each(function () {
            let section = $(this);
            let participantId = section.data('participant-id');
            let participantAddress = section.data('participant-address');
            let invoiceNumber = section.data('invoice-number');
            let fortnightFromDate = section.data('fortnight-from-date');
            let fortnightToDate = section.data('fortnight-to-date');
            let xeroLinkStatus = section.data('xero-link-status');
            let issueFor = section.find('.issue_for').text();
            let issueDate = section.find('.issue_date').text();
            let dueDate = section.find('.due_date').text();
            let subTotal = section.find('.sub_total').text();
            let totalGst = section.find('.total_gst').text();
            let grandTotal = section.find('.grand_total').text();            

            let items = [];

            section.find('.invoice-item-row').each(function () {
                let row = $(this);
                items.push({
                    date: row.find('.item_date').text(),
                    shift: row.find('.item_shift').text(),
                    item_id: row.find('.item_id').text(),
                    item_account: row.find('.item_account_code').text(),
                    description: row.find('.item_description').text(),
                    quantity: row.find('.item_quantity').text(),
                    rate: row.find('.item_rate').text(),
                    tax_rate: row.find('.item_tax_uuid').text(),
                    amount: row.find('.item_amount').text(),
                });
            });

            invoiceGroups.push({
                participant_id: participantId,
                participant_name: issueFor,
                participant_address: participantAddress,
                invoice_number: invoiceNumber,
                fortnight_from_date: fortnightFromDate,
                fortnight_to_date: fortnightToDate,
                xero_link_status: xeroLinkStatus,
                invoice_date: issueDate,
                due_date: dueDate,
                sub_total: subTotal,
                total_gst: totalGst,
                grand_total: grandTotal,
                items: items
            });
        });

        $.ajax({
            url: '{{ route("invoices.sendAndStore") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                type: type,
                invoices: invoiceGroups
            },
            success: function (response) {
                if (type == 'save') {
                    window.location.href = response['invoice_url'];

                }else{
                    Swal.fire({
                        title: 'Success!',
                        text: response['message'],
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(function () {
                        $('.invoic_preview_modal_body').html('');
                        $('#invoic_preview_modal').modal('hide');
                    });
                    window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                }
                blockUI.release();
            },
            error: function (xhr) {
                Swal.fire({
                    title: 'Error!',
                    text: 'An error occurred: ' + xhr.responseText,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                blockUI.release();
            }
        });
    });

    function actionResetInvoiceSentStatus(ele){
        var historyId = $(ele).data('history-id');
        if (historyId) {
            deleteAlert.text = 'Are you sure want to reset invoice sent status?';
            Swal.fire(deleteAlert).then((result) => {
                if (result.isConfirmed) {
                    blockUI.block();
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            "_token": "{{ csrf_token() }}",
                            _method: 'POST',
                            historyId: historyId
                        },
                        url: "{!! route('invoices.reset_sent_history') !!}",
                        success: function(data) {
                            blockUI.release();
                            if (data.status) {
                                Swal.fire({
                                    title: 'Success!',
                                    text: 'Invoice sent status reset successfully!',
                                    icon: 'success',
                                    confirmButtonText: 'OK'
                                })
                                window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                            }
                        },
                        error: function(error) {
                            Swal.fire({
                                title: 'Error!',
                                text: 'An error occurred: ' + error.responseText,
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                            blockUI.release();
                        }
                    });
                }
            });
        } else {
            Swal.fire({
                title: 'Error!',
                text: 'Invalid history ID.',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }
    }
</script>
@endsection