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

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

{{-- Content --}}
@section('content')
<!--begin::Card-->
<form class="form" method="post" action="{{$action}}" id="manage_form" enctype="multipart/form-data">
    @if(!empty($data['id']))
    @method('PUT')
    @endif
    @csrf
    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <!--begin::Toolbar-->
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1" aria-controls="kt_user_edit_tab_1">
                            <span class="nav-icon">
                                <i class="fas fa-receipt"></i>
                            </span>
                            <span class="nav-text font-size-lg">Invoices</span>
                        </a>
                    </li>
                    @if(!empty($data['id']))
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_2" aria-controls="kt_user_edit_tab_2">
                            <span class="nav-icon">
                                <i class="fas fa-clock"></i>
                            </span>
                            <span class="nav-text font-size-lg">History</span>
                        </a>
                    </li>
                    @endif
                    @if(!empty($data['id']))
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_user_edit_tab_3" aria-controls="kt_user_edit_tab_3">
                            <span class="nav-icon">
                                <i class="fas fa-clock"></i>
                            </span>
                            <span class="nav-text font-size-lg">Email Sent History</span>
                        </a>
                    </li>
                    @endif
                </ul>
            </div>
            <!--end::Toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body">

            <div class="tab-content">
                <!--begin::Tab-->
                @include("backend.errors")
                @include('backend.invoice.invoices.tab_1')
                @if(!empty($data['id']))
                @include('backend.invoice.invoices.tab_2')
                @include('backend.invoice.invoices.tab_3')
                @endif
                <!--end::Tab-->
            </div>
        </div>
        <!--begin::Card body-->
        <div class="card-footer text-right">
            <button type="button" class="btn btn-primary me-2 btn_to_disable btn-hover-rise" id="submit_btn" onclick="submitForm(this)" data-type="save">Save on Portal</button>
            @if($is_xero)
            <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Save & Sync With Xero" data-bs-custom-class="tooltip-inverse" id="sync_btn_tooltip">
                <button type="button" class="btn btn-primary me-2 btn_to_disable btn-hover-rise" id="save_and_sync_submit_btn" onclick="submitForm(this)" data-type="save_and_sync">Save & Sync With Xero</button>
            </span>
            @endif
            <a href="{{route('invoices.index')}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
        </div>
    </div>
    <!--end::Card-->
</form>
@endsection

{{-- Scripts Section --}}
@section('scripts')
@include('backend.aside_minimize')
@if(!empty($data['id']))
{!! $html->scripts() !!}
{!! $html2->scripts() !!}
@endif
<script src="{{ asset(theme()->getDemo() . '/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
<script type="text/javascript">
    var isGstApplied = 0;

    function submitForm(ele) {
        $('#sync_with_xero_input').remove();
        var type = $(ele).attr('data-type');
        $('#invoice_status').find('option[value="3"]').prop('disabled', false);
        if (type == 'save_and_sync' && $('#manage_form').valid()) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This invoice will be synced to Xero Account. Status of the invoice will be DRAFT. To finalise and send invoice to customer, please check your Xero Account.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Save & Sync!'
            }).then((result) => {
                if (result.isConfirmed) {
                    if ($('#invoice_status').val() == 0) {
                        $('#invoice_status').val(1);
                    }
                    $('#manage_form').append('<input type="hidden" name="sync_xero" id="sync_with_xero_input" value="1">');
                    $('#manage_form').submit();
                    $('#save_and_sync_submit_btn').prop('disabled', true);
                    $('#save_and_sync_submit_btn').html('submitting ...');
                }
            });
        } else if ($('#manage_form').valid()) {
            $('#manage_form').submit();
        }
    }

    function actionParticipant() {
        var participantId = $('.input_client_id').val();
        if (participantId) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: {
                    id: participantId,
                    invoice_date: $('input[name="invoice_date"]').val(),
                    "_token": "{{ csrf_token() }}",
                },
                url: "{!! route('invoices.participant_info') !!}",
                success: function(data) {
                    if (data.status) {
                        $('input[name="participant_name"]').val(data.data.name);
                        if (parseInt(data.data.invoice_due_days) > 0) {
                            $('.due_date_label').text('(' + data.data.invoice_due_days + ' days)');
                        } else {
                            $('.due_date_label').text('');
                        }

                        $('input[name="participant_address"]').val(data.data.address);
                        $('input[name="due_date"]').val(data.data.invoice_due_date);
                        $('#participant_invoice_emails').text(data.data.invoice_emails ? "Participant Invoice Settings Emails: " + data.data.invoice_emails : "");
                        if (data['is_linked_with_xero']) {
                            $('#save_and_sync_submit_btn').removeClass('disabled');
                            updateSyncWithXeroTitle('Save & Sync With Xero');
                        } else {
                            $('#save_and_sync_submit_btn').addClass('disabled');
                            updateSyncWithXeroTitle('Save & Sync With Xero (Participant not linked with Xero)');
                        }
                    }
                },
                error: function(xhr, status, error) {
                    $('#save_and_sync_submit_btn').addClass('disabled');
                    updateSyncWithXeroTitle('Save & Sync With Xero (Participant not linked with Xero)');
                }
            });
        } else {
            $('input[name="participant_name"]').val('');
            $('input[name="participant_address"]').val('');
            $('input[name="due_date"]').val('');
            $('#participant_invoice_emails').text('');
            $('#save_and_sync_submit_btn').addClass('disabled');
            updateSyncWithXeroTitle('Save & Sync With Xero (No participant selected)');
        }

    }

    function updateSyncWithXeroTitle(title) {
        $('#sync_btn_tooltip').attr('data-bs-original-title', title);
    }

    $(document).ready(function() {


        $('#sync_with_xero_input').remove();
        // $('#manage_form').validate();
        $('#manage_form').validate({
            focusInvalid: true,
            rules: {
                participant_id: {
                    required: true
                },
                invoice_date: {
                    required: true
                }
            },
            messages: {
                participant_id: {
                    required: "Please select participant."
                },
                invoice_date: {
                    required: "Please select invoice date."
                }
            },
            showErrors: function(errorMap, errorList) {
                this.defaultShowErrors();
            },
            invalidHandler: function(event, validator) {
                if (validator.numberOfInvalids()) {
                    const firstError = $(validator.errorList[0].element);
                    $('html, body').animate({
                        scrollTop: firstError.offset().top - 100
                    }, 500);
                    setTimeout(function() {
                        firstError.trigger('focus');
                    }, 600);
                }
            }
        });
        $('.kt_select2_11').select2({
            // placeholder: "Add a tag",
            tags: true
        });

        // Disable all the fields in the dom if $isDisable is true
        @if($isDisable)
        $('#kt_user_edit_tab_1').find('input, select, textarea').prop('disabled', true);
        $('.btn_to_disable').css('pointer-events', 'none').css('opacity', '0.5');
        $('#invoice_files_btn, .dropzone-delete').css('pointer-events', 'none').css('opacity', '0.5');
        @endif

        initInvoiceDatePickr();
        initDatePicker();
        initDueDatePicker();
        actionParticipant();
        managePaymentStatus();

        $(document).on('change', '.input_client_id', function() {
            actionParticipant();
        });

        $(document).on('change', '.item_id', function() {
            manageMasterPayRates(this, true);
        });

        $(document).on('change', '.item_tax_rate', function() {
            manageTaxRate();
        });

        $(document).on('keyup', '.item_quantity, .item_rate', function() {
            actionApplyGst();
        });

        $(document).on('change', '.apply_gst', function() {
            actionApplyGst();
        });

        $(document).on('change', '#payment_status', function() {
            managePaymentStatus();
        });

    $(document).on('change', '.shift, .invoice_item_date', function () {
    let row = $(this).closest('[data-repeater-item]');
     
    let participantId = $('.input_client_id').val();
    let date          = row.find('.invoice_item_date').val();
    let shift         = row.find('.shift').val();

    if (!participantId || !date || !shift) {
        return;
    }

    $.ajax({
        url: "{{ route('invoices.get-participant-rate') }}",
        type: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            participant_id: participantId,
            date: date,
            shift: shift,
        },
        success: function (res) {
            row.find('.item_id').val(res.code).trigger('change');
        }
      });
    });


        // $(document).on('click', '.delete_invoice_file', function() {
        //     var fileId = $(this).data('id');
        //     if (!fileId) {
        //         showAlert('error', 'Error', 'Invalid file ID.');
        //         return;
        //     }

        //     Swal.fire({
        //         title: 'Are you sure?',
        //         text: "You won't be able to revert this!",
        //         icon: 'warning',
        //         showCancelButton: true,
        //         confirmButtonColor: '#3085d6',
        //         cancelButtonColor: '#d33',
        //         confirmButtonText: 'Yes, delete it!'
        //     }).then((result) => {
        //         if (result.isConfirmed) {
        //             $.ajax({
        //                 type: 'POST',
        //                 dataType: 'json',
        //                 data: {
        //                     id: fileId,
        //                     "_token": "{{ csrf_token() }}",
        //                 },
        //                 url: "{!! route('invoices.delete_invoice_file') !!}",
        //                 success: function(data) {
        //                     if (data.status) {
        //                         $('#invoice_file_' + fileId).remove();
        //                         showAlert('success', 'Deleted!', data.message);
        //                     } else {
        //                         showAlert('error', 'Error', data.message || 'An error occurred while deleting the file.');
        //                     }
        //                 },
        //                 error: function(xhr, status, error) {
        //                     showAlert('error', 'Error', 'An unexpected error occurred: ' + (xhr.responseJSON?.message || error));
        //                 }
        //             });
        //         }
        //     });
        // });

        function showAlert(icon, title, text) {
            Swal.fire({
                icon: icon,
                title: title,
                text: text,
                timer: 5000,
                showConfirmButton: false
            });
        }

        $('#invoice_items_repeater_div').repeater({
            initEmpty: false,

            defaultValues: {
                'text-input': 'foo',
            },

            show: function() {
                $(this).slideDown();
                initInvoiceItemDatePickr();
                actionApplyGst();
            },
            hide: function(deleteElement) {
                $(this).slideUp(deleteElement);
                setTimeout(function() {
                    actionApplyGst();
                }, 1000);
            },
            ready: function(ele) {
                initInvoiceItemDatePickr();
                $('.item_id').each(function() {
                    manageMasterPayRates(this, false);
                });
                manageTaxRate();
                actionApplyGst();
            }
        });

        $('.nav-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
            var target = $(e.target).attr("href") // activated tab
            if (target == "#kt_user_edit_tab_2") {
                $('.card-footer').hide();
                window.LaravelDataTables["dataTableBuilder"].ajax.reload();
            } else if (target == "#kt_user_edit_tab_3") {
                $('.card-footer').hide();
                window.LaravelDataTables["dataTableBuilder2"].ajax.reload();
            } else {
                $('.card-footer').show()
            }
        });
    });



    function manageMasterPayRates(ele, isChanged) {
        var $selected = $(ele).find('option:selected');
        var account = $selected.data('account') || '';
        var taxRate = $selected.data('tax-rate') || '';
        var salePrice = $selected.data('sale_price') || '';
        var description = $selected.data('description') || '';
        var oldSalePrice = $(ele).closest('tr').find('.item_rate').val() || '';
        var oldDescription = $(ele).closest('tr').find('.description').val() || '';

        $(ele).closest('tr').find('.item_account').find(`option[value="${account}"]`).prop('selected', true).trigger('change');
        $(ele).closest('tr').find('.item_account_hidden').val(account);
        $(ele).closest('tr').find('.item_tax_rate').find(`option[value="${taxRate}"]`).prop('selected', true).trigger('change');
        $(ele).closest('tr').find('.item_tax_rate_hidden').val(taxRate);
        if (isChanged) {
            $(ele).closest('tr').find('.description').val(description);
            $(ele).closest('tr').find('.item_rate').val(salePrice);
        }
    }

    function manageTaxRate() {
        $('.item_tax_rate').each(function() {
            var $selected = $(this).find('option:selected');
            var taxRate = $selected.data('tax-rate') || '';

            $(this).closest('tr').find('.item_tax_rate_percentage').val(taxRate);
            actionApplyGst();
        });
    }

    // Round-half-up to match Xero's rounding behaviour (avoids JS toFixed() banker's-rounding issues)
    function roundHalfUp(value, decimals) {
        return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
    }

    function calculateAmountAfterTax() {
        var subtotal = 0;
        var totalTaxAmount = 0;
        $('.invoice_item_amount').each(function() {
            var quantity = $(this).closest('tr').find('.item_quantity').val();
            var rate = $(this).closest('tr').find('.item_rate').val();
            var taxPercentage = isGstApplied ? $(this).closest('tr').find('.item_tax_rate_percentage').val() : 0;
            var amount = roundHalfUp(quantity * rate, 2);
            var taxAmount = roundHalfUp((amount * taxPercentage) / 100, 2);
            subtotal += amount;
            totalTaxAmount += taxAmount;
            $(this).closest('tr').find('.item_tax_amount').val(taxAmount.toFixed(2));
            $(this).val(amount.toFixed(2));
        });
        $('#sub_total').val(roundHalfUp(subtotal, 2).toFixed(2));
        $('#total_gst').val(roundHalfUp(totalTaxAmount, 2).toFixed(2));
        $('#grand_total').val(roundHalfUp(subtotal + totalTaxAmount, 2).toFixed(2));
    }

    function managePaymentStatus() {
        var paymentStatus = $('#payment_status').val() || '';
        $('#payment_status_hidden').val(paymentStatus);
    }

    function actionApplyGst() {
        isChecked = $('.apply_gst').is(':checked');
        if (isChecked) {
            $('.apply_gst_action').removeClass('d-none');
            isGstApplied = 1;
        } else {
            $('.apply_gst_action').addClass('d-none');
            isGstApplied = 0;
        }
        calculateAmountAfterTax();
    }

    function initInvoiceDatePickr() {
        $(".invoice-datepicker").daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 1901,
            autoUpdateInput: false,
            "autoApply": true,
            locale: {
                format: 'DD-MM-YYYY',
            },
            //maxYear: parseInt(2030)
        }, function(start, end, label) {
            var years = moment().diff(start, "years");
            // alert("You are " + years + " years old!");
        }).on('apply.daterangepicker', function(ev, picker) {
            // `e` here contains the extra attributes
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            actionParticipant();
            initDueDatePicker();
        }).on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            actionParticipant();
            initDueDatePicker();
        });
    }

    function initInvoiceItemDatePickr() {
        $(".item-datepicker").daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 1901,
            autoUpdateInput: false,
            "autoApply": true,
            locale: {
                format: 'DD-MM-YYYY',
            },
            //maxYear: parseInt(2030)
        }, function(start, end, label) {
            var years = moment().diff(start, "years");
            // alert("You are " + years + " years old!");
        }).on('apply.daterangepicker', function(ev, picker) {
            // `e` here contains the extra attributes
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            console.log(picker);

        }).on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    }

    function initDropZone() {
        // set the dropzone container id
        const id = "#invoice_files";
        const ajaxUrl = "{{route('invoices.upload_files',$data['id']??'')}}";

        const dropzone = document.querySelector(id);
        if (!dropzone) {
            return;
        }

        var uploadedFiles = [];

        // set the preview element template
        var previewNode = dropzone.querySelector(".dropzone-item");
        previewNode.id = "";
        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
            url: ajaxUrl, // Set the url for your upload script location
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            // parallelUploads: 20,
            maxFiles: 10,
            uploadMultiple: false,
            maxFilesize: 10, // Max filesize in MB
            previewTemplate: previewTemplate,
            acceptedFiles: "image/*,application/pdf,image/heif,.heif,.heic",
            // acceptedFiles: "application/pdf",
            previewsContainer: id + " .dropzone-items", // Define the container to display the previews
            clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
        });

        myDropzone.on("addedfile", function(file) {
            // If a file already exists, remove it before adding the new one
            //  if (this.files.length > 1) {                    
            //     this.removeFile(this.files[0]);
            // }
            // Hookup the start button
            const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
            dropzoneItems.forEach(dropzoneItem => {
                dropzoneItem.style.display = '';
            });
        });

        myDropzone.on("maxfilesexceeded", function(file) {
            this.removeFile(file);
            Swal.fire({
                icon: 'error',
                text: 'You can upload a maximum of 10 files only.'
            });
        });

        myDropzone.on("error", function(file, message) {
            if (message.toString().includes("File is too big")) {
                Swal.fire({
                    icon: 'error',
                    text: 'Maximum file size allowed is 10 MB.'
                });
                this.removeFile(file);
            }
        });

        // Update the total progress bar
        myDropzone.on("totaluploadprogress", function(progress) {
            const progressBars = dropzone.querySelectorAll('.progress-bar');
            progressBars.forEach(progressBar => {
                progressBar.style.width = progress + "%";
            });
        });

        myDropzone.on("sending", function(file, xhr, formData) {
            const DeletePreviousFile = $('#invoice_files').val();
            // Show the total progress bar when upload starts
            formData.append('DeletePreviousFile', DeletePreviousFile);
            const progressBars = dropzone.querySelectorAll('.progress-bar');
            progressBars.forEach(progressBar => {
                progressBar.style.opacity = "1";
            });
        });

        // Hide the total progress bar when nothing"s uploading anymore
        myDropzone.on("complete", function(progress) {
            const progressBars = dropzone.querySelectorAll('.dz-complete');
            // console.log(progress, progress.xhr);
            if (progress && progress.xhr && progress.xhr.status == 200 && progress.xhr.response) {
                var res = JSON.parse(progress.xhr.response);
                $(progress.previewElement).attr('id', res['id']);
                $(progress.previewElement).attr('file_name', res['file_name']);
                uploadedFiles.push(res['file_name']);
                $('#invoice_files_hidden_input').val(uploadedFiles.join(";"));

                if (res['warning']) {
                    errorAlert['text'] = res['warning'];
                    errorAlert['icon'] = 'info';
                    Swal.fire(errorAlert);
                }
            } else {
                $(progress.previewElement).attr('id', 'new');
            }
            setTimeout(function() {
                progressBars.forEach(progressBar => {
                    progressBar.querySelector('.progress-bar').style.opacity = "0";
                    progressBar.querySelector('.progress').style.opacity = "0";
                });
            }, 300);
        });
    }

    initDropZone();

    $(document).on('click', '.dropzone-delete', function() {
        actionDeleteDropZone(this);
    });

    function actionDeleteDropZone(ele) {
        var row = $(ele).parents('.dropzone-item:first');
        if (row) {
            var id = row.attr('id');
            let deleteConfirmation = deleteAlert;
            deleteConfirmation['text'] = "Are you sure you want to delete this file?";
            Swal.fire(deleteConfirmation).then(function(result) {
                if (result.value) {
                    let requestData = {
                        "_token": "{{ csrf_token() }}",
                        "type": id == "new" ? 'DeleteNewFile' : 'particularFile'
                    };
                    if (id == "new") {
                        requestData["file_name"] = row.attr('file_name');
                        requestData["id"] = "new";
                    } else {
                        requestData["file_id"] = id;
                        requestData['id'] = "{{$data['id']??''}}";
                    }
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: requestData,
                        url: "{!! route('invoices.delete_invoice_file') !!}",
                        success: function(data) {
                            if (data.status) {
                                let deleteSuccess = deleteSuccessAlert;
                                deleteSuccess['text'] = "File deleted successfully!";
                                Swal.fire(deleteSuccess);
                                row.remove();
                            }
                        }
                    });
                }
            });
        }
    }

    function initDueDatePicker() {

        var invoice_date = '{{$invoice_date}}'; // e.g. 9-1-26
        var input_date = $('.invoice-datepicker').val();

        var minDate;

        if (invoice_date && moment(invoice_date, 'D-M-YY', true).isValid()) {
            minDate = moment(invoice_date, 'D-M-YY');
        } else if (input_date && moment(input_date, 'DD-MM-YYYY', true).isValid()) {
            minDate = moment(input_date, 'DD-MM-YYYY');
        } else {
            minDate = moment(); // fallback to today
        }

        $(".leave-datepicker").daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: false,
            autoApply: true,
            showDropdowns: true,
            minDate: minDate,
            locale: {
                format: 'DD-MM-YYYY'
            }
        }, function(start) {
            $(this.element).val(start.format('DD-MM-YYYY'));
        });

    }
</script>
@endsection