@use('App\Services\Date')
@extends('companyuser::layouts.master')

@section('title', __('accounting::reconciliations.add'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/view/info-details.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/custom/reports/index.css') }}">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
{{-- <script src="{{ asset('/js/app.js') }}" defer></script>--}}
<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            var selectedCheckBoxArray = [];
            let url = new URL(window.location.href);
            let search_params = url.searchParams;
            if(search_params.has('ids')) {
                idData = JSON.parse(search_params.get("ids"))
                selectedCheckBoxArray = idData;
            }
            const records = document.querySelectorAll('.record');
            const systemTotalElement = document.getElementById('system_total');
            const systemAuditTotalElement = document.getElementById('audit_total');
            const differenceElement = document.getElementById('difference');

            // values for backend
            const systemAuditTotalValueElement = document.getElementById('audit_closing_value');
            const differenceValueElement = document.getElementById('difference_value');

            records.forEach(record => {
                record.addEventListener('change', function(e) {
                    const balance = e.target.parentNode.parentNode.parentNode.querySelector('.balance').value;
                    if (this.checked) {
                        systemAuditTotalValueElement.value = systemAuditTotalElement.innerText = parseFloat(systemAuditTotalElement.innerText) + parseFloat(balance);
                    } else {
                        systemAuditTotalValueElement.value = systemAuditTotalElement.innerText = parseFloat(systemAuditTotalElement.innerText) - parseFloat(balance);
                    }
                    let difference = differenceValueElement.value = differenceElement.innerText = parseFloat(systemTotalElement.innerText) - systemAuditTotalElement.innerText;

                    if (!difference) {
                        document.getElementById('show_in_case_diff_eq_zero').style.display = 'inline-block';
                        document.getElementById('show_in_case_diff_not_eq_zero').style.display = 'none';
                        document.getElementById("reconciliation_account").disabled = true;
                        document.getElementById("with_entry_in_case_of_pop_up").disabled = true;
                    } else {
                        document.getElementById('show_in_case_diff_eq_zero').style.display = 'none';
                        document.getElementById('show_in_case_diff_not_eq_zero').style.display = 'inline-block';
                        document.getElementById("reconciliation_account").disabled = false;
                        document.getElementById("with_entry_in_case_of_pop_up").disabled = false;
                    }
                });
            });


            // =============== when click on any action button ===================== //
            // 1- disable the action button
            // 2- enable and disable the values based on clicked button
            // 3- do required action

            document.querySelectorAll('.action_button').forEach(actionButton => {
                actionButton.addEventListener('click', function(e) {
                    debugger;
                    const status = this.getAttribute('data-status-value');
                    document.getElementById('status').value = status;
                    if ((status === "finished" && !parseInt(differenceValueElement.value)) || status !== "finished") {
                        document.getElementById("reconciliation_account").disabled = true;
                        document.getElementById("with_entry_in_case_of_pop_up").disabled = true;
                    }
                    this.disabled = true;
                    this.style.pointerEvents="none";
                    e.preventDefault();
                    document.getElementById('current_form').submit();
                })
            });
            // =============== when click on any action button ===================== //

            // =============== when check the records checkboxes ===================== //
            $('#journal_records_table tbody').on('click', 'input[type="checkbox"]', function(e) {
                var checkBoxId = $(this).val();
                var rowIndex = $.inArray(checkBoxId, selectedCheckBoxArray); //Checking if the Element is in the array.
                if(this.checked && rowIndex === -1) {
                    selectedCheckBoxArray.push(checkBoxId); // If checkbox selected and element is not in the list->Then push it in array.
                    document.getElementById('recordsValues').value = selectedCheckBoxArray;
                }
                else if (!this.checked && rowIndex !== -1) {
                    selectedCheckBoxArray.splice(rowIndex, 1); // Remove it from the array.
                    document.getElementById('recordsValues').value = selectedCheckBoxArray;
                }
            });
            // =============== when click on pagination links ===================== //
            $('.pagination').on('click', '.page-link', function(e) {
                var link = new URL(this.getAttribute('href'));
                var search_parameters = link.searchParams;
                search_parameters.set('ids', JSON.stringify(selectedCheckBoxArray));
                search_parameters.set('auditTotal', systemAuditTotalValueElement.value);
                search_parameters.set('differenceValue', differenceValueElement.value);

                link.search = search_parameters.toString();
                var new_url = link.toString();
                this.setAttribute('href',new_url);
            });

        })(jQuery);
    });
</script>
@endsection
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a>@lang('companyuser::sidebar.Accounting')</a>
            </li>
            <li class="breadcrumb-item active">
                <a href="{{route('company.reconciliations.index', $subdomain)}}" class="active">@lang('accounting::reconciliations.reconciliations')</a>

            </li>
            <li class="breadcrumb-item active">
                <a href="#">@lang('Create')</a>
            </li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section class="summ_report">
    <div class="container-fluid">
        <div class="headBtns mx-1 fixed-btns">
            <div class="btn-group pull-right">
                <a class="" id="show_in_case_diff_not_eq_zero" data-toggle="modal" data-target="#finishModal" title="@lang('Finish')">
                    <span class="icon-Apply action-icon"></span>
                </a>

                <a class="action_button" id="show_in_case_diff_eq_zero" style="display: none;background-color:transparent;border:none" type="button" data-status-value="finished" title="@lang('Finish')">
                    <span class="icon-Apply action-icon"></span>
                </a>

                <a class="action_button" style="background-color: transparent;border:none" type="button" data-status-value="drafted" title="@lang('Save For Later')">
                    <span class="icon-Save action-icon"></span>
                </a>
            </div>
            <div class="mb-1 pull-left">
                <a class="text-green" href="{{route('company.reconciliations.index', $subdomain)}}" title="{{__('Back')}}">
                    @if(LaravelLocalization::getCurrentLocale() === 'en')
                    <span class="icon-Previous action-icon back-btnIcon"></span>
                    @else
                    <span class="icon-Next action-icon back-btnIcon"></span>
                    @endif
                </a>

            </div>
        </div>

        <section class="text-center  mb-0 py-2">

            <div class="row ml-3 mr-3">
                <div class="col-xl-1">
                </div>
                <div class="col-xl-10">
                    <div class="col-xl-4 col-lg-6 col-xs-12">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div class="card-block">
                                    <div class="media">
                                        <div class="media-body text-center">
                                            <h3 class="success">@lang('accounting::reconciliations.system_total')</h3>
                                            <p class="font-medium-1" id="system_total">{{ $data['closingBalance']['balanceAfterTransaction'] }}</p>
                                            <p>{{ $data['currency'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-xs-12">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div class="card-block">
                                    <div class="media">
                                        <div class="media-body text-center">
                                            <h3 class="success">@lang('accounting::reconciliations.audit_total')</h3>
                                            <p class="font-medium-1" id="audit_total">{{request('auditTotal') ?? $data['openingBalance']['balanceAfterTransaction']}}</p>
                                            <p>{{ $data['currency'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-xs-12">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div class="card-block">
                                    <div class="media">
                                        <div class="media-body text-center">
                                            <h3 class="success">@lang('accounting::reconciliations.difference')</h3>
                                            <p class="font-medium-1" id="difference">{{ request('differenceValue') ?? $data['closingBalance']['balanceAfterTransaction'] - $data['openingBalance']['balanceAfterTransaction']}}</p>
                                            <p class="invisible">{{ $data['currency'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        <div class="card">
            @include('companyuser::errors.lists')
            @include('companyuser::errors.all')

            <div class="card-body collapse in">

                <div class="text-center">
                    <h2><span class="numbers-ar">{{ $data['account']->code }}</span> - {{ $data['account']->name }} </h2>
                    <h4><b>{{$data['companyName']}}</b></h4>
                    <h4> @lang('from') {{$data['dates']['from']}} @lang('to') {{$data['dates']['to']}} </h4>
                </div>
            </div>

            <form id="current_form" class="inline" method="post" action="{{ route('company.reconciliations.store',$subdomain) }}">
                @csrf

                <div class="table-responsive col-md-12">
                    <table class="table table-borderless" id= "journal_records_table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>@lang('reports::reports.date')</th>
                                <th>@lang('accounting::reconciliations.type')</th>
                                <th>@lang('reports::reports.account_statement.transaction')</th>
                                <th>@lang('reports::reports.description')</th>
                                <th>@lang('reports::reports.debit')</th>
                                <th>@lang('reports::reports.credit')</th>
                                <th>@lang('accounting::reconciliations.balance')</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td> {{ $data['openingBalance']['date']  }} </td>
                                <td>@lang('reports::reports.opening_balance')</td>
                                <td></td>
                                <td></td>
                                <td> {{ number_format($data['openingBalance']['debit'],2)  }} </td>
                                <td> {{ number_format($data['openingBalance']['credit'],2)  }} </td>
                                <td> {{ $data['openingBalance']['balanceAfterTransaction'] < 0 ? '(' . number_format(abs($data['openingBalance']['balanceAfterTransaction']) , 2) . ')'
                                                    : number_format($data['openingBalance']['balanceAfterTransaction'],2) }} </td>
                            </tr>
                            @foreach($data['journalRecords'] as $journalRecord)
                            <tr>
                                <td width="10">
                                    <label class="custom-control custom-checkbox">
                                        @php
                                            if(request('ids') && request('ids') !== null){
                                                $ids = json_decode(request('ids'),true);
                                            }else{
                                                $ids = [];
                                            }
                                        @endphp
                                        @if(in_array($journalRecord['id'], $ids))
                                            <input value="{{ $journalRecord['id'] }}" name="records[]" type="checkbox" class="custom-control-input dev-check-all record" checked>
                                        @else
                                            <input value="{{ $journalRecord['id'] }}" name="records[]" type="checkbox" class="custom-control-input dev-check-all record">
                                        @endif
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description"></span>
                                    </label>
                                </td>

                                <td>{{ $journalRecord['journalEntryDate'] }}</td>
                                <td>{{ $journalRecord['transactionType'] }}</td>
                                <td>{{ $journalRecord['journalEntryCode'] }}</td>
                                <td>{{ $journalRecord['description'] }}</td>
                                <td>
                                    @if($journalRecord['debit'])
                                    @if($data['account']->default_transaction_type==\Modules\Accounting\Enums\AccountTypesEnum::DEBIT)
                                    <input type="hidden" class="balance" value="{{ $journalRecord['debit'] }}">
                                    @else
                                    <input type="hidden" class="balance" value="{{ -$journalRecord['debit'] }}">
                                    @endif
                                    @endif
                                    {{ $journalRecord['debit'] }}
                                </td>
                                <td>
                                    @if($journalRecord['credit'])
                                    @if($data['account']->default_transaction_type==\Modules\Accounting\Enums\AccountTypesEnum::CREDIT)
                                    <input type="hidden" class="balance" value="{{ $journalRecord['credit'] }}">
                                    @else
                                    <input type="hidden" class="balance" value="{{ -$journalRecord['credit'] }}">
                                    @endif
                                    @endif
                                    {{ $journalRecord['credit'] }}
                                </td>
                                <td>
                                    {{ $journalRecord['balanceAfterTransaction'] < 0 ? '(' . number_format(abs($journalRecord['balanceAfterTransaction']) , 2) . ')'
                                                    : number_format($journalRecord['balanceAfterTransaction'],2)}}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot style="border-top: 1px solid black;">
                            <tr>
                                <th></th>
                                <th>{{ $data['closingBalance']['date']  }}</th>
                                <th>@lang('reports::reports.account_statement.closing_balance')</th>
                                <th></th>
                                <th></th>
                                <th>{{ number_format($data['closingBalance']['debit'],2)  }}</th>
                                <th>{{ number_format($data['closingBalance']['credit'],2)  }}</th>
                                <th>{{ $data['closingBalance']['balanceAfterTransaction'] < 0 ? '(' . number_format(abs($data['closingBalance']['balanceAfterTransaction']) , 2) . ')'
                                                    : number_format($data['closingBalance']['balanceAfterTransaction'],2) }}</th>
                            </tr>
                            <tr>
                                <th></th>
                                <th></th>
                                <th class="pt-2"> @lang('reports::reports.account_statement.gross_change') </th>
                                <th></th>
                                <th></th>
                                <th class="pt-2"> {{ $data['grossChange']['debit'] ? number_format($data['grossChange']['debit'],2) : ($data['grossChange']['credit'] ? '' : 0 ) }} </th>
                                <th class="pt-2"> {{ $data['grossChange']['credit'] ? number_format($data['grossChange']['credit'],2) : ($data['grossChange']['debit'] ? '' : 0)  }} </th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                    {{$data['journalRecords']->appends(request()->query())->links()}}
                    <input type="hidden" id="recordsValues" name="recordsValues">
                    <input name="from" type="hidden" value="{{ Date::format($data['dates']['from'], 'date') }}">
                    <input name="to" type="hidden" value="{{ Date::format($data['dates']['to'], 'date') }}">
                    <input name="reconciled_account" type="hidden" value="{{ request('account_id') }}">

                    <input name="system_closing" value="{{ $data['closingBalance']['balanceAfterTransaction'] }}" id="system_closing_value" type="hidden">
                    <input name="audit_closing" value="{{ request('auditTotal') ?? 0}}" id="audit_closing_value" type="hidden">
                    <input name="difference" value="{{ request('differenceValue') ?? $data['closingBalance']['balanceAfterTransaction'] }}" id="difference_value" type="hidden">

                    <input name="status" id="status" type="hidden">
                </div>
                <div class="modal" id="finishModal" tabindex="-1" role="dialog" aria-labelledby="finishModalLabel" style="top:0;padding-right:0!important;">
                    <div class="modal-dialog modal-dialog-centered" 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">
                                    <b>@lang('Finish')</b>
                                </h4>
                            </div>
                            <div class="modal-body text-center">
                                <h4 class="modal-title">@lang('accounting::reconciliations.pop_up_note') </h4>

                                <form>
                                    <div class="form-body">
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label class="label" for="reconciliation_account">@lang('reports::reports.account')</label>
                                                </div>
                                                <div class="col-md-9">
                                                    <select id="reconciliation_account" name="reconciliation_account" class="w-100 py-1 form-control" style="width:100%">
                                                        @foreach($data['subCategories'] as $subCategories)
                                                        <optgroup label="{{ $subCategories->name }}">
                                                            @foreach($subCategories->accounts as $account)
                                                            @if($account->id!=request('account_id'))
                                                            <option @if(request('reconciliation_account')==$account->id) selected @endif value="{{$account->id}}">{{$account->name}}</option>
                                                            @endif
                                                            @endforeach
                                                        </optgroup>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <input type="hidden" name="with_entry" value="1" id="with_entry_in_case_of_pop_up">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                <span class="pull-right">
                                    <button class="btn btn-primary action_button" type="button" data-status-value="finished">@lang('Finish')</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</section>


@endsection
@section('extra_scripts')
<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            // needed for select2
            $("#reconciliation_account").select2({
                tags: false,
                language: {
                    noResults: function() {
                        return "{{ __('No result found')}}";
                    }
                },
                dropdownParent: $("#finishModal")
            });
            // needed for select2
        })(jQuery);
    });
</script>
@endsection