@use('App\Services\Date')
@extends('companyuser::layouts.master')
@section('title', __('accounting::bank_statements.Show bank statement details'))
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
@push('account-view-style')
    <link href="{{ asset('css/plugins/tree/style.css') }}" rel="stylesheet">
    <link href="{{asset('assets/css/custom/modal/style.css') }}" rel="stylesheet">

@endpush
@push('account-view-scripts')
    <script src="{{asset('js/scripts/ui/scrollable.js')}}" type="text/javascript" defer></script>
@endpush
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb ml-2">
                <li class="breadcrumb-item"><a> @lang('companyuser::sidebar.Accounting')</a>
                </li>
                <li class="breadcrumb-item active">
                    <a href="{{route('company.reconciliations.index', ['subdomain' => $subdomain])}}">
                        @lang('accounting::reconciliations.reconciliations')
                    </a>
                </li>
                <li class="breadcrumb-item active">
                    <a href="{{route('company.bank-statements.index', ['subdomain' => $subdomain])}}">
                        @lang('accounting::bank_statements.title')
                    </a>
                </li>
                <li class="breadcrumb-item active"><a href="#">@lang('Show')</a>
                </li>
            </ol>
        </div>
    </div>
@endsection
@section('content')
@include('companyuser::errors.all')
@include('companyuser::errors.lists')
    <div class="content-body">
        <section>
            <div class="container-fluid">
                <div class="headBtns mx-1 fixed-btns">
            <div class="btn-group pull-right">
            </div>
            <div class="mb-1 pull-left">
                <a class="text-green" href="{{route('company.bank-statements.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>
                <div class="card mb-0 p-1">
                    <div class="card-body  in">
                        <div class="row">
                             <div class="col-lg-6">
                                 <div class="row">
                                     <dt class="col-xs-6">
                                         <p>@lang('accounting::bank_statements.account')</p>
                                     </dt>
                                     <dd class="col-xs-6">
                                         <p>{{Lang::locale() == 'ar' ? $bankStatement->account->name_ar : $bankStatement->account->name_en}}
                                         </p>
                                     </dd>
                                 </div>
                                 <div class="row">
                                     <dt class="col-xs-6">
                                         <p>@lang('accounting::bank_statements.import date')</p>
                                     </dt>
                                     <dd class="col-xs-6">
                                         <p>{{ Date::format($bankStatement->created_at)}}</p>
                                     </dd>
                                 </div>
                                 <div class="row">
                                     <dt class="col-xs-6">
                                         <p>@lang('accounting::bank_statements.start date')</p>
                                     </dt>
                                     <dd class="col-xs-6">
                                         {{ Date::format($bankStatement->start_date) }}
                                     </dd>
                                 </div>
                                 <div class="row">
                                     <dt class="col-xs-6">
                                         <p>@lang('accounting::bank_statements.end date')</p>
                                     </dt>
                                     <dd class="col-xs-6">
                                         {{ Date::format($bankStatement->end_date) }}
                                     </dd>
                                 </div>
                                 <div class="row">
                                     <dt class="col-xs-6">
                                         <p>@lang('accounting::bank_statements.added by')</p>
                                     </dt>
                                     <dd class="col-xs-6">
                                         <p class="text-bold-500">
                                             @if($bankStatement->created_by == null)
                                                 @lang('accounting::assets.System')
                                             @elseif($bankStatement->created_by == auth()->user()->id)
                                                 @lang('accounting::assets.You')
                                             @else
                                                 {{$bankStatement->user->uname}}
                                             @endif</p>
                                     </dd>
                                 </div>
                                 <div class="row">
                                     <dt class="col-xs-6">
                                         <p>@lang('accounting::bank_statements.status')</p>
                                     </dt>
                                     <dd class="col-xs-6">
                                         <p class="text-bold-500">{{ \Modules\Accounting\Enums\BankStatementStatusEnum::toString($bankStatement->status) }}</p>
                                     </dd>
                                 </div>
                             </div>
                         </div>
                        <hr>
                        <div class="card-block">
                            <div class="card-title">
                                <h2>@lang('accounting::bank_statements.Bank Statement records')</h2>
                            </div>
                            <div style="margin-bottom: 10px;display: none;" role="alert" id="deleted_journal_entry_msg" class="alert alert-warning">

                            </div>
                            <table
                                class="table table-striped table-column tenants_table dataex-res-configuration  @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                                <thead>
                                    <tr>
                                        <th>@lang('accounting::bank_statements.Id')</th>
                                        <th>@lang('accounting::bank_statements.date')</th>
                                        <th style="width: 25%">@lang('accounting::bank_statements.description')</th>
                                        <th>@lang('accounting::bank_statements.amount')</th>
                                        <th>@lang('accounting::bank_statements.status')</th>
                                        <th>@lang('Actions')</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($bankStatement->records as $record)
                                        <tr>
                                            <td>{{$record->id}}</td>
                                            <td><span class="d-none">{{$record->date}}</span>{{ Date::format($record->date)}}</td>
                                            <td>{{$record->description}}</td>
                                            <td>{{$record->amount}}</td>
                                            <td>
                                                @if($record->status == \Modules\Accounting\Enums\BankStatementRecordsStatusEnum::TO_DO || !$record->journal_entry_id)
                                                {{ \Modules\Accounting\Enums\BankStatementRecordsStatusEnum::toString($record->status) }}
                                                @else
                                                    @if($record->journal_entry_id && $record->journalEntry->deleted_at)
                                                        <a href="javascript:showDeletedEntryMessage()">
                                                    @else
                                                        <a target="_blank" href="{{route('company.manual-journal-entries.show', [$subdomain,$record->journal_entry_id])}}">
                                                    @endif
                                                    {{ \Modules\Accounting\Enums\BankStatementRecordsStatusEnum::toString($record->status) }}
                                                    </a>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                @if($record->status == \Modules\Accounting\Enums\BankStatementRecordsStatusEnum::TO_DO)
                                                    @can('accounting.bank-statements.edit')
                                                        <a href="#"

                                                        onclick="showMatchJournalEntryPopup(this,{{ $record->id }}, '{{route('company.bank-statement-record.matched-journal-entries.index', ['subdomain' => $subdomain, 'bank_statement_record' => $record->id])}}')"
                                                        class='btn btni rounded-circle font-small-2 btn-success btn-xs btn-delete delete-item text-white'
                                                        data-toggle="tooltip" data-placement="bottom"
                                                        title="{{__('accounting::bank_statements.link journal entry')}}"><i class="fa fa-check"></i>
                                                        </a>
                                                    @endcan
                                                    @can('accounting.bank-statements.edit')
                                                        <a href="#"
                                                        onclick="showCreateJournalEntryPopup(this, {{ $record->id}})"
                                                        class='btn btni rounded-circle font-small-2 btn-warning btn-xs btn-edit text-white'
                                                        data-toggle="tooltip" data-placement="bottom" title="{{__('accounting::bank_statements.add journal entry')}}">
                                                            <i class="fa fa-plus "></i>
                                                        </a>
                                                    @endcan
                                                @endif
                                                @can('accounting.bank-statements.edit')
                                                    <a data-url="{{route('company.bank-statement-record.destroy', ['subdomain' => $subdomain, 'bank_statement_record' => $record->id])}}"
                                                       data-toggle="modal" data-target="#favoritesModal"
                                                       class='btn btni rounded-circle font-small-2 btn-danger btn-xs btn-delete delete-item text-white'>
                                                        <i class="fa fa-trash" data-toggle="tooltip" data-placement="bottom" title="@lang('Delete')"></i>
                                                    </a>
                                                @endcan
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            <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('accounting::manual_journal_entries.delete confirmation message')
                                            </p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('No')</button>
                                            <span class="pull-right">
                                                <form id="delete-form" action="" method="POST" class="form">
                                                    @csrf
                                                    @method('delete')
                                                    <button type="submit" class="btn btn-primary">@lang('Yes')</button>
                                                </form>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    {{-- create journal entry modal --}}
    <div class="modal fade" id="journalEntryModal" tabindex="-1" role="dialog" aria-labelledby="depreciationModalLabel" style="top:20%">
        <div class="modal-dialog" role="document">
            <div class="modal-content filter-section-collapse">
                <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="depreciationModalLabel">@lang('accounting::bank_statements.create_journal_entry')</h4>
                </div>
                <div style="margin: 13px;margin-bottom: 0px;display: none;" role="alert" id="journalEntry_added_msg" class="alert alert-success"></div>
                <div style="margin: 13px;margin-bottom: 0px;" class="alert alert-danger hidden journalEntry_error">
                    <div class="error-header">
                        {{-- <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> --}}
                        <ul id="journalEntry_error">
                        </ul>
                    </div>
                </div>
                <form action="" method="POST" id="createEntryForm">
                    @csrf
                    <div class="modal-body">
                        <div class="container">
                            <div class="row align-items-center">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label for="account_id">@lang('accounting::easy_entries.To Account')</label>
                                        </div>
                                        <div class="col-md-7">
                                            <select name="account_id" id="all_accounts" class="w-100 form-control selection" style="width: 100%;">
                                                @foreach($activeAccounts as $subCategory)
                                                    <optgroup label="{{ $subCategory->name }}">
                                                        @foreach($subCategory->accounts as $account)
                                                            <option
                                                                    value="{{$account->id}}" {{ (old('account_id') == $account->id) ? "selected" : "" }}>{{$account->name}}</option>
                                                        @endforeach
                                                    </optgroup>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <label for="description">@lang('accounting::chart_of_accounts.Description')</label>
                                        </div>
                                        <div class="col-md-7">
                                            <textarea name="description" id="description" cols="450" rows="5" class ="form-control"></textarea>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>


                    </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 type="button" onclick="createJournalEntry()" class="btn btn-primary" id="add-journalEntry-btn">@lang('Save')</button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- link journal entry modal --}}
    <div class="modal fade" id="matchJournalEntryModal" tabindex="-1" role="dialog" aria-labelledby="matchJournalEntryModalLabel" style="top:20%">
        <div class="modal-dialog" role="document">
            <div class="modal-content filter-section-collapse">
                <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="matchJournalEntryModalLabel">@lang('accounting::bank_statements.link journal entry')</h4>
                </div>
                <div style="margin: 13px;margin-bottom: 0px;display: none;" role="alert" id="journalEntry_match_msg" class="alert alert-success"></div>
                <div class="modal-body">

                    <div class="container">
                        <div class="row align-items-center">
                            <div class="table-responsive">
                                <table
                                    class="table mb-0 table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th style="width: 10%;">@lang('accounting::manual_journal_entries.Journal Number')</th>
                                            <th style="width: 20%;">@lang('accounting::assets.Date')</th>
                                            <th style="width: 25%;">@lang('accounting::assets.Description')</th>
                                            <th style="width: 20%;">@lang('accounting::assets.Amount')</th>
                                            <th style="width: 10%;">@lang('Actions')</th>
                                        </tr>
                                    </thead>
                                    <tbody id="journalEntryDataRow">

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>


                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>

                </div>
            </div>
        </div>
    </div>
    {{-- --}}

@endsection
@section('extra_scripts')
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {

            // For A Delete Record Popup
            $(document).on('click', '.delete-item', function() {
                // $('.delete-item').click(function () {
                var modal = $(this).attr('data-target');
                var url = $(this).attr('data-url');
                $(modal + ' #delete-form').attr("action", url);
            });

            $("#all_accounts").select2({
                tags: false,
                language: {
                    noResults: function() {
                        return "{{ __('No result found')}}";
                    }
                },
                dropdownParent: $("#journalEntryModal")
            });

            $(document).on('click', '.linkWithJournalEntry', function() {
                $("#overlay").css("display","flex");
                $("#overlay").css("z-index","999999");
                $('.linkWithJournalEntry').attr('disabled', true);
                let recordId =  $(this).attr('data-recordId');
                let journalId =  $(this).attr('data-journalId');

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{route('company.bank-statement-record.matched-journal-entries.store', ['subdomain' => $subdomain])}}",
                    type: 'POST',
                    data: {record_id : recordId, journal_entry_id : journalId},
                    dataType: "json",
                    success: function(response) {
                        $('#journalEntry_match_msg').text('{{__("Item created successfully")}}');
                        $('#journalEntry_match_msg').show().delay(5000).slideUp('slow');
                        $('#matchJournalEntryModal').modal('hide');
                        $("#overlay").css("display","none");
                        location.reload();
                    },
                    error: function(xhr, status, error) {

                    },
                    complete: function(data) {
                        $('.linkWithJournalEntry').attr('disabled', false);
                        $('#matchJournalEntryModal').modal('hide');
                    }
                });

            });

        });
    });
    function showCreateJournalEntryPopup(btn, record_id) {
        $(btn).attr('disabled', true);
        $('.journalEntry_error').addClass('hidden');
        $('#description').val('');
        let url = "{{route('company.bank-statement-record.journal-entry.store', ['subdomain' => $subdomain, 'bank_statement_record' => ':recordId'])}}";
        url = url.replace(':recordId',record_id);
        $('#createEntryForm').attr('action',url);

        $('#journalEntryModal').modal('show');
    }

    function createJournalEntry() {
        $('#add-journalEntry-btn').attr('disabled', true);
        $('.journalEntry_error').addClass('hidden');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: $('#createEntryForm').attr('action'),
            type: 'POST',
            data: $('#createEntryForm').serialize(),
            dataType: "json",
            success: function(response) {
                $('#journalEntry_added_msg').text('{{__("Item created successfully")}}');
                $('#journalEntry_added_msg').show().delay(5000).slideUp('slow');
                location.reload();
            },
            error: function(xhr, status, error) {
                displayErrors(xhr, 'journalEntry_error');
            },
            complete: function(data) {
                $('#add-journalEntry-btn').attr('disabled', false);
            }
        });
    }
    function displayErrors(xhr, errorClass) {
        if ("errors" in xhr.responseJSON) {
            $('.' + errorClass).removeClass('hidden');
            $('#' + errorClass).empty();
            $.each(xhr.responseJSON.errors, function(key, value) {
                $('#' + errorClass).append('<li>' + value + '</li>')
            });
        } else {
            $('.' + errorClass).removeClass('hidden');
        }
    }

    function showMatchJournalEntryPopup(btn, recordId, url){
        $(btn).attr('disabled', true);
        $("#journalEntryDataRow").empty();
        let linkLable = "{{__('accounting::bank_statements.link')}}";
        $.ajax({
            url: url,
            type: 'GET',
            dataType: "json",
            success: function(response) {
                $.each(response.data, function(key, value) {
                    $('#journalEntryDataRow').append(`
                    <tr>
                        <td><a href="${value.journalUrl}" target="_blank">${value.code}</a></td>
                        <td>${value.journal_date}</td>
                        <td>${value.memo}</td>
                        <td>${value.amount}</td>
                        <td><a href="#" data-recordId = "${recordId}" data-journalId = "${value.id}" class="btn btn-primary btn-sm linkWithJournalEntry">${linkLable}</button></td>
                    </tr>

                    `)
                });
                $('#matchJournalEntryModal').modal('show');
            },
            error: function(xhr, status, error) {

            },
            complete: function(data) {
                $(btn).attr('disabled', false);
            }
        });
    }

    function showDeletedEntryMessage(){
        $('#deleted_journal_entry_msg').text('{{__('accounting::bank_statements.the linked journal entry deleted')}}');
        $('#deleted_journal_entry_msg').show().delay(2000).slideUp('slow');
        $('html, body').animate({
            scrollTop: $("#deleted_journal_entry_msg").offset().top - 300
        }, 300);
    }
</script>
@endsection