@extends('companyuser::layouts.master')
@section('title', __('companyuser::sidebar.Debit Notes'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/filter.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/plugins/input-dropdown/input-dropdown.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/plugins/range/range.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style-svgFont.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/css/pickers/daterange/daterangepicker.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/modal/style.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('assets/js/custom/exportPdf.js') }}" defer></script>

<style>
    .mlr-12 {
        margin-left: 12px;
        margin-right: 12px;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }

    .filter-section-collapse form .input-group .input-group-addon.h-45 {
        height: 45px !important;
    }

    .lh-3 {
        line-height: 3;
    }
    .btni{
        margin: 0 3px !important
    }
    a.disabled {
        pointer-events: none;
        cursor: default;
    }
    
    /* ZATCA Error Status Styling */
    .popup-zatca-error {
        color: #ff932a !important;
        text-decoration: underline !important;
        cursor: pointer !important;
        transition: opacity 0.2s ease;
    }
    
    .popup-zatca-error:hover {
        opacity: 0.8;
        text-decoration: underline !important;
    }
    @media screen and (min-width: 1280px) and (max-width: 1366px) {

        table#sales_invoice_table tr td:nth-child(1),
        table#sales_invoice_table tr td:nth-child(2),
        table#sales_invoice_table tr td:nth-child(3),
        table#sales_invoice_table tr td:nth-child(8),
        table#sales_invoice_table tr td:nth-child(9),
        table#sales_invoice_table tr td:nth-child(10),
        table#sales_invoice_table tr td:nth-child(11),
        table#sales_invoice_table tr td:nth-child(12) {
            white-space: nowrap !important;
        }

        table#sales_invoice_table {
            overflow-x: auto !important;
        }
    }
    .dataTables_scroll{
        max-width: 100%;
    }
    .dataTables_scrollHeadInner{
        width: 100% !important;
    }
    table.dataTable{
        width: 100% !important;
    }
    #sales_invoice_table_wrapper .row:nth-child(2){
        overflow: auto;
    }
    table#sales_invoice_table tr td {
        white-space: nowrap !important;
    }
</style>
@endsection

@push('extra_scripts')

<script src="{{ asset('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js') }}" defer></script>
<script src="{{ asset('assets/js/vendors/js/pickers/daterange/daterangepicker.js') }}" defer></script>
<script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
<script src="{{ asset('assets/js/scripts/modal/components-modal.js') }}" defer></script>
@endpush

@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('company.customers.index', $subdomain)}}">@lang('companyuser::sidebar.Sales')</a></li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.Debit Notes')</a></li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section id="">
    <div class="container-fluid">
        <div class="col-xs-6 headTitle">
            <h3 class="py-half">@lang('companyuser::invoices.Debit Notes')</h3>
        </div>
        <div class="headBtns fixed-btns" style="padding-bottom: 10px;">
            <div class="btn-group pull-right">
                @can('sales.invoices.create')
                    @if(!$taxableUser)
                    <a class="text-white" href="{{route('company.debit-notes.create', [\Modules\Sales\Enums\InvoiceTypesEnum::TAX_DEBIT_INVOICE, 'subdomain' => $subdomain])}}" title="@lang('Add')">
                        <span @if(!$accountingSettingsCount) disabled @endif class="icon-Add action-icon"></span>
                    </a>
                    @else
                        @if ($companyInfo->zatca_comply && gettype($invoiceTaxableTypes) == 'string')
                            <a class="text-green" href="{{route('company.debit-notes.create', [$invoiceTaxableTypes, 'subdomain' => $subdomain])}}" title="@lang('Add')">
                                <span class="icon-Add action-icon"></span>
                            </a>
                        @else
                            <a type="button" data-toggle="dropdown" aria-haspopup="true" class="bg-transparent"
                                style="font-size: inherit; border:none;" aria-expanded="false" title="{{ __('Add')}}">
                                <span class="icon-Add action-icon"></span>
                            </a>
                            <div class="dropdown-menu" id="saveAndCreate" @if(app()->getLocale() == 'en') style="margin-left: -65px;" @endif>
                                @foreach($invoiceTaxableTypes as $type)
                                    <a class="dropdown-item"
                                        href="{{ route('company.debit-notes.create',['type' => $type, 'subdomain' => $subdomain]) }}"
                                        title="{{ __('sales::invoices.'.$type.'_message')}}">{{ __('sales::invoices.'.$type) }}
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    @endif
                @endcan
            </div>
            @can('sales.invoices.export')
            <div class="pull-left">
                <a href="{{route('company.debit-notes.export', ['subdomain' => $subdomain, 'status' => request('status'), 'from' => request('from'), 'to' => request('to')])}}" class="{{!count($invoices) ? 'disabled' : ''}} pull-left" title="@lang('reports::reports.download_excel')">
                    <span class="icon-Excel action-icon"></span>
                </a>
                <a class="{{!count($invoices) ? 'disabled' : ''}} pull-left font-small-3"
                   title="@lang('reports::reports.download all invoices')"
                   href="#"
                   id="export_invoices_in_pdf" >
                    <span @if(!$accountingSettingsCount) disabled @endif class="icon-Pdf action-icon"></span>

                </a>
                <a href="{{route('company.invoices.print-debit-notes-list', ['subdomain' => $subdomain, 'status' => request('status'), 'from' => request('from'), 'to' => request('to')])}}" class="{{!count($invoices) ? 'disabled' : ''}} pull-left" target="_blank" title="@lang('Print')">
                    <span class="icon-Print action-icon"></span>
                </a>
                @if ($companyInfo->zatca_comply)
                    <a id="reportToZatca" style="margin-top: -4px;" class="{{!count($invoices) ? 'disabled' : ''}} pull-left" title="{{__('sales::invoices.report_to_zatca')}}">
                        <img src="{{ asset('assets/icons/report-to-zatca-'.app()->getLocale().'.svg') }}" width="65" height="55" />
                    </a>
                @endif
            </div>
            @endcan
        </div>

        @if( !$accountingSettingsCount)
        <div class="row">
            <div class="col-md-12  col-xs-12 text-center">
                <div class="alert alert-white settings-alert">
                    @lang('superadmin::Dashboard.Please set your ') &nbsp;
                    <a href="{{route('company.accounting-settings.index', $subdomain)}}">
                        @lang('settings::general_settings.accounting settings') </a> &nbsp;
                    @lang('superadmin::Dashboard.to start adding accounting transactions')
                </div>
            </div>
        </div>
        @endif
        <div id="sendToZatcaBtnStatus" class="alert text-white" style="background-color: #11B99F; display:none;" role="alert">
            {{__('sales::invoices.processing_send_zatca_report')}}
        </div>
        <div id="zatcaBtnErrorMessage" class="alert alert-danger" style="background-color: #11B99F; display:none;" role="alert">
        </div>

        @include('companyuser::errors.all')
        @include('companyuser::errors.lists')

        <div class="mt-1">
            <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse"
                data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                <div class="d-flex justify-content-between">
                    <span>@lang('Filter') </span><i class="fa fa-angle-down"></i>
                </div>
            </button>
        </div>

        <div class="collapse filter-section-collapse" id="collapseExample">
            <form action="{{ route('company.debit-notes.index', ['subdomain' => $subdomain]) }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>

            <div class="card card-body mb-0">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-12 w-100-ipad-portrait">
                                    <label for="category">@lang('sales::invoices.Customer')</label>
                                </div>
                                <div class="col-md-12  w-100-ipad-portrait mb-1">
                                    <customers-dropdown-component 
                                        :selected="{{ 
                                            json_encode(\Modules\Sales\Models\Customer::getForDropdown(request('customer'))) 
                                        }}"
                                        :create-new="true"
                                            :create-new-url="'{{ route('company.customers.create', ['subdomain' => $subdomain, 'reference' => 'invoices', 'attachment_id' => request('attachment_id'), 'type' => request('type')]) }}'"
                                            :lang="'{{ app()->getLocale() }}'"
                                            :multi-select="false"
                                            input-name="customer"
                                            :translations="{
                                                 placeholder: '{{ __("sales::customers.select_customer") }}',
                                                searchPlaceholder: '{{ __("sales::customers.search_customers") }}',
                                                createNewText: '{{ __("sales::customers.add_new_customer") }}',
                                                noResultsText: '{{ __("sales::customers.no_customers_found") }}',
                                            }"
                                            class="w-100"
                                        />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="col-md-12 w-100-ipad-portrait pl-0 ml-0">
                            <label for="cost_center_id" style="font-size: 13px;">@lang('products::cost_center.Cost Center')</label>
                        </div>
                        <div class="col-md-12 w-100-ipad-portrait ml-0 pl-0 padd0">
                            <select name="cost_center_id" id="cost_center_id"
                                class="w-100 py-1 form-control select2-tag h-45" style="width: 100%">
                                @can('cost-center.main-center.view')
                                <option value="">{{__('All')}}</option>
                                <option @if(request('cost_center_id')=='main_center' ) selected @endif
                                    value="main_center">{{__('products::cost_center.main center')}}</option>
                                @endcan
                                @foreach($costCenters as $costCenter)
                                @if($costCenter->parent_id)
                                <option @if(request('cost_center_id')==$costCenter->id) selected @endif
                                    value="{{$costCenter->id}}">{{$costCenter->code}}
                                    {{ app()->getLocale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en }}
                                </option>
                                @else
                                <option @if(request('cost_center_id')==$costCenter->id) selected @endif
                                    value="{{$costCenter->id}}">{{$costCenter->code}} -
                                    {{ app()->getLocale() == 'ar' ? $costCenter->name_ar : $costCenter->name_en }}
                                </option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-12  w-100-ipad-portrait">
                                    <label for="category">@lang('sales::invoices.Date')</label>
                                </div>
                                <div class="col-md-6  w-50-ipad-portrait mb-half">
                                    <x-date-picker 
                                        name="date_from" 
                                        :value="request('date_from')"
                                        input-class="h-45"
                                        :is-invalid="$errors->has('date_from')"
                                    />
                                    @error('date_from')
                                    <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                        <p>{{ $message }}</p>
                                    </div>
                                    @enderror
                                </div>
                                <div class="col-md-6  w-50-ipad-portrait mb-half">
                                    <x-date-picker 
                                        name="date_to" 
                                        :value="request('date_to')"
                                        input-class="h-45"
                                        :is-invalid="$errors->has('date_to')"
                                    />

                                    @error('date_to')
                                    <div class="invalid-feedback text text-danger w-100 d-block" role="alert">
                                        <p>{{ $message }}</p>
                                    </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-12  w-100-ipad-portrait">
                                    <label for="category">@lang('sales::invoices.Amount')</label>
                                </div>
                                <div class="col-md-6  w-50-ipad-portrait mb-half">
                                    <input type="number" name="amount_from" value="{{ request('amount_from') }}" class="form-control h-45" placeholder="{{ __('from') }}">
                                </div>
                                <div class="col-md-6  w-50-ipad-portrait mb-half">
                                    <input type="number" name="amount_to" value="{{ request('amount_to') }}" class="form-control h-45" placeholder="{{ __('to') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <div class="row">
                                <button class="dropdown-item col-md-12" type="button">
                                    <fieldset>
                                        <label class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" name="old_year_receipts"
                                                @if(request("old_year_receipts")) checked @endif>
                                            <span class="custom-control-indicator"></span>
                                            <span
                                                class="custom-control-description">@lang('sales::invoices.old_year_invoices')</span>
                                        </label>
                                    </fieldset>
                                </button>
                                <button class="dropdown-item col-md-12" type="button">
                                    <fieldset>
                                        <label class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input"
                                                name="current_year_receipts" @if(request('current_year_receipts'))
                                                checked @endif>
                                            <span class="custom-control-indicator"></span>
                                            <span
                                                class="custom-control-description">@lang('sales::invoices.current_year_invoices')</span>
                                        </label>
                                    </fieldset>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-left mt-2">
                    <button type="submit" class="btn btn-info mr-1 mb-1 p-5">
                        <img src="{{asset('assets/images/Done.png') }}" alt="done" width="35px">
                    </button>
                    <button type="reset" id="reset" class="btn btn-warning mb-1 p-5"> <span
                            class="icon-Delete f-32"></span></button>
                </div>
            </div>
        </div>
    </div>

    </form>
    <div class="mlr-12">
        <section id="configuration">
            <div class="row mt-2">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-block card-dashboard">
                            <table id="sales_invoice_table" class="table table-striped"
                                style="width:100%;display: inline-table;">
                                <thead>
                                    <tr>
                                        <th>@lang('sales::invoices.send')</th>
                                        <th>@lang('sales::debit_notes.Reference ID')</th>
                                        <th>@lang('sales::invoices.Customer')</th>
                                        <th>@lang('sales::invoices.Date')</th>
                                        <th>@lang('sales::invoices.status')</th>
                                        <th>@lang('products::cost_center.Cost Center')</th>
                                        <th>@lang('sales::invoices.Amount')</th>
                                        <th>@lang('sales::invoices.outstanding')</th>
                                        <th class="zatca-reported-column d-none">
                                            <select class="zatca-reported-filter data-select">
                                                <option value="">@lang('sales::invoices.report_zatca_status')</option>
                                                <option value="">All</option>
                                                @forelse($zatcaInvoicesStatuses as $id => $zatcaStatus)
                                                    <option value="{{ $id }}">{{ $zatcaStatus }}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </th>
                                        <th>@lang('sales::invoices.type')</th>
                                        <th>@lang('sales::invoices.supply_date')</th>
                                        <th>@lang('sales::invoices.time')</th>
                                        <th>@lang('sales::invoices.related_invoice')</th>
                                        <th>@lang('Actions')</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>

                            <receipts-modal :type="{{ json_encode(__('sales::invoices.invoice')) }}"
                                :allocation="{{ json_encode(__('sales::invoices.allocation')) }}"
                                :remaningamount="{{json_encode(__('sales::invoices.remaningAmount')) }}"
                                :unpaidbills="{{json_encode(__('sales::invoices.unpaidtype')) }}"
                                :Youhavetoasignselectedreceiptamountto="{{json_encode(__('sales::invoices.You have to assign receipts to be linked with this')) }}"
                                :referenceid="{{json_encode(__('sales::invoices.ReferenceID')) }}"
                                :date="{{json_encode(__('sales::invoices.Date')) }}"
                                :amount="{{json_encode(__('sales::invoices.Amount')) }}"
                                :assigned="{{json_encode(__('sales::invoices.assign')) }}"
                                :totalstring="{{json_encode(__('sales::invoices.totalString')) }}"
                                :save="{{ json_encode(__('Save')) }}" :cancel="{{ json_encode(__('Cancel')) }}"
                                :showing="exampleModalShowing = false" @close="exampleModalShowing = false"
                                :receiptslist="receipts = []" :outstanding="outstanding = 0" :allocated="allocated = 0"
                                :allocatedstring="{{ json_encode(__('sales::customer_receipts.allocated')) }}"
                                :total="total = 0" :route="route = ''" :csrf="{{json_encode(csrf_token())}}"
                                :billreference="billReference = ''" :lang="{{ json_encode(app()->getLocale()) }}"
                                :search="{{ json_encode(__('purchases::purchase_bills.search')) }}">
                            </receipts-modal>

                            {{---------------- popup to deleted Invoice -------------------------------}}
                            <div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog"
                                aria-labelledby="favoritesModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="favoritesModalLabel">@lang('Delete')</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p>
                                                @lang('sales::invoices.delete confirmation message')
                                            </p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default mx-1"
                                                data-dismiss="modal">@lang('Cancel')</button>
                                            <span
                                                class="@if(app()->getlocale() == 'ar') pull-right @else pull-left @endif mx-1">
                                                <form action="" method="POST" class="form delete-form"
                                                    id="deleteInvoice">
                                                    @csrf
                                                    @method('delete')
                                                    <button type="submit" class="btn btn-primary"
                                                        id="deleteInvoiceBtn"></button>
                                                </form>
                                            </span>
                                            <span
                                                class="@if(app()->getlocale() == 'ar') pull-right @else pull-left @endif mx-1">
                                                <form action="" method="POST" class="form"
                                                    id="deleteInvoiceWithEntries">
                                                    @csrf
                                                    @method('delete')
                                                    <button type="submit"
                                                        class="btn btn-primary">@lang('sales::invoices.Delete accounting
                                                        data')</button>
                                                </form>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ZATCA Error Popup Component --}}
                            <zatca-error-popup-component 
                                ref="zatcaErrorPopup"
                                :language="'{{ app()->getLocale() }}'"
                            ></zatca-error-popup-component>

                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</section>
@endsection

@section('extra_scripts')
{{-- this jquery simulate library to fire native events on selected element instead of
the normal jquery event (which is not native event) and this to match the vue click event which relies on the native
events --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-simulate/1.1.1/jquery.simulate.min.js"
    integrity="sha512-99l4kQHM730187dXruSGULp7g34xamOKXWXHrzz1HuKuKrLg/VBpRTbbI8in5g8lUnzJkchunWlHlHznEbQzAw==" defer
    crossorigin="anonymous"></script>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {
            const loader=document.getElementById("overlay");
            loader.style.display="none"

            $("body").on("click",".filterbtn",function(){
                let url = new URL(window.location.href);
                let date_from = url.searchParams.get("date_from");
                if($("#collapseExample").hasClass("in") == false && $("#collapseExample").hasClass("dateCheck") == false && (date_from == '' ||  date_from == null)){

                    $(".singledate").val("");
                    $("#collapseExample").addClass("dateCheck");
                }
            })
            // the problem was in jquery datatable responsive small screen is that, the datatable hides the the action buttons and
            // create new row appears when you click on the plus icon in small screens,
            // the problem was that new created row dosn't have the vue click event
            // (if that was jquery event it would've been very easy to fix by making $(document).on('click') but the problem was that the
            // the click event was vue and the datatable is jquery, the problem was in that comination)
            // The solution after so many tries : added class to that button and on click check the current tr if it has class child
            // so it means that is the new created row (note : the datatable creats the new row-tr- with class child  )
            // and then go to the previes tr which have the hidden button with click event and trigger click event on it
            // (note : here we used simulate libarary to trigger native click event which vue relies on instead of the jquery click event
            // that triggers by click() or trigger(click) )
            $(document).on('click', '.assign-receipt-btn', function() {
                let parentTr = $(this).closest('tr');
                if (parentTr.hasClass('child')) {
                    let previesTr = parentTr.prev();
                    let lastTd = previesTr.children().last();
                    lastTd.children('.assign-receipt-btn').simulate("click");
                }
            });

            $("body").on("click",".popup-zatca-error",function(e){
                e.preventDefault();
                var errors = $(this).attr('data-msg');
                if (errors) {
                    try {
                        errors = JSON.parse(decodeURIComponent(escape(atob(errors))));
                        
                        // Get the Vue component reference via window
                        const zatcaErrorPopup = window.zatcaErrorPopup;
                        if (!zatcaErrorPopup) {
                            console.error('ZATCA Error Popup component not found. Please refresh the page.');
                            alert('{{ __("sales::invoices.error_loading_details") }}');
                            return;
                        }
                        
                        // Check if it's the new format with error_codes
                        if (errors.error_codes && Array.isArray(errors.error_codes)) {
                            // Use the Vue component with the new API
                            zatcaErrorPopup.open(errors.error_codes);
                        } else if (errors.message) {
                            // Old format - system messages (show in popup as well)
                            zatcaErrorPopup.openWithMessage(errors.message);
                        } else if (Array.isArray(errors)) {
                            // Old format with array of errors
                            const errorCodes = errors.map(item => item.code).filter(Boolean);
                            if (errorCodes.length > 0) {
                                zatcaErrorPopup.open(errorCodes);
                            } else {
                                // Fallback: show messages directly
                                const messages = errors.map(item => item.message || '').join('\n');
                                zatcaErrorPopup.openWithMessage(messages);
                            }
                        }
                    } catch (error) {
                        console.error('Error parsing zatca error:', error);
                        alert('{{ __("sales::invoices.error_loading_details") }}');
                    }
                }
            });

            //to reset filter dropdown menus
            $('#reset').click(function(e) {
                e.preventDefault()
                // here we made it val to work in both inputs and dropdown menu
                $('.form-control').val("");
                $('.select2-tag').select2({
                    allowClear: true
                });
                // or prop('selectedIndex',0);
            });

            $('#export_invoices_in_pdf').click(function(e) {
                const outputFileName = "{{__('sales::invoices.debit-notes')}}.pdf";
                downloadPdfFileFromUrl("/