@extends('companyuser::layouts.master')

@section('title', __('accounting::reconciliations.edit'))
@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($) {
            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');


            // =======  when open the page  ========= //
            if (!parseInt(differenceValueElement.value)) {
                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 open the page  ========= //

            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() {
                    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;
                    document.getElementById('current_form').submit();
                })
            });





            // =============== when click on any action button ===================== //


        })(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('Edit')</a>
            </li>
        </ol>
    </div>
</div>
@endsection

@section('content')
<section class="summ_report">
    <form action="{{ route('company.reconciliations.update',['reconciliation'=>$data['id'],'subdomain'=>$subdomain]) }}" method="POST" class="inline" id="current_from">
        @csrf
        @method('PUT')
        <div class="container-fluid">
            <div class="headBtns mx-1 fixed-btns">
                <div class="btn-group pull-right">
                    <a href="" 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>
                    <button 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>
                    </button>
                    <button 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>
                    </button>
                </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['system_total'] }}</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">{{$data['audit_total']}}</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">{{ $data['difference'] }}</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['from']}} @lang('to') {{$data['to']}} </h4>
                    </div>
                </div>


                <input type="hidden" name="id" value="{{$data['id']}}" />

                <div class="table-responsive col-md-12">
                    <table class="table table-borderless">
                        <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">
                                        <input value="{{ $journalRecord['id'] }}" name="records[]" type="checkbox" class="custom-control-input dev-check-all record" @if(in_array($journalRecord['id'],$data['records'])) checked @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>

                    <input name="system_closing" value="{{ $data['system_total'] }}" id="system_closing_value" type="hidden">
                    <input name="audit_closing" value="{{ $data['audit_total'] }}" id="audit_closing_value" type="hidden">
                    <input name="difference" value="{{ $data['difference'] }}" id="difference_value" type="hidden">
                    <input name="reconciled_account" value="{{ $data['reconciled_account'] }}" id="reconciled_account" 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">
                                                        @foreach($data['subCategories'] as $subCategories)
                                                        <optgroup label="{{ $subCategories->name }}">
                                                            @foreach($subCategories->accounts as $account)
                                                            @if($account->id!=$data['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>


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


@endsection