@extends("newDashboard.index")

@section("css")
<link rel="stylesheet" href="{{asset('metronic/css/data-table.css')}}">
<style>
.accounting-section {
    display: none;
    border: 1px solid #ddd;
    padding: 15px;
    margin-top: 15px;
    border-radius: 5px;
    background-color: #f9f9f9;
}
.accounting-section.active {
    display: block;
}
.restriction-notice {
    display: none;
    padding: 10px 14px;
    border-radius: 5px;
    margin-bottom: 12px;
    font-size: 13px;
    border-left: 4px solid #f0ad4e;
    background-color: #fff8ee;
    color: #856404;
}
.restriction-notice.active {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
#edit-entries-table select { min-width: 180px; }
#edit-entries-table input[type="number"] { min-width: 100px; }
.entries-totals td { font-weight: bold; background: #f1f1f1; }
.entries-balance-ok { color: green; font-weight: bold; }
.entries-balance-error { color: red; font-weight: bold; }
</style>
@endsection

@section("main-content")
<div class="content-wrapper">
    <div class="page-header">
        <h3 class="page-title">
            <span class="page-title-icon bg-gradient-primary text-white me-2">
                <i class="mdi mdi-cards-variant menu-icon"></i>
            </span> {{__('messages.Vouchers System')}}
        </h3>
    </div>
    <div class="row">
        <div id="success_message"></div>
        <div class="buttons-container">
            <a class="btn btn-primary float-end" href="{{ route('accounting.voucher.create') }}">{{__('messages.Add Voucher')}}</a>
        </div>
    </div>

    <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
    <input type="hidden" id="user-index" value="{{ route('accounting.vouchers.get-data') }}" />
    <input type="hidden" id="add-ajax-route" value="{{ route('user.add.data') }}" />
    <input type="hidden" id="update-ajax-route" value="{{ route('accounting.voucher.update') }}" />
    <input type="hidden" id="delete-ajax-route" value="{{ route('user.delete.data') }}" />
    <input type="hidden" id="return-purchase-route" value="{{ route('purchase.return') }}" />
    <input type="hidden" id="get-purchase-data-route" value="{{ route('purchase.get.data') }}" />
    <input type="hidden" id="edit-ajax-route" value="{{ route('accounting.vouchers.get-data-id') }}" />

    <div class="container pb-2">
        <div class="row">
            <div class="table-responsive customscroll">
                <table class="table datatable text-center" id="datatable">
                    <div class="container pb-2">
                        <div class="row gap-1 custom-padding-filter-tmp">
                            <div class="col-12 col-md-4 col-xl-3">
                                <label class="col-form-label">{{ __('messages.date:') }}</label>
                                <div class="center-custom-width-filter-date">
                                    <input type="text" id="config-demo" placeholder="{{ __('messages.date from - to') }}"
                                        class="form-control" />
                                </div>
                            </div>
                            <div class="form-group col-md-3">
                                <label class="col-form-label required">{{ __('validation.Select', ['attribute' => __('messages.Item')]) }}</label>
                                <select id="supplierSelect" name="item" class="js-example-disabled-results form-control">
                                    <option value="0">{{ __('validation.Select', ['attribute' => __('messages.Voucher Type')]) }}</option>
                                    <option value="1">{{ __('messages.Payment Voucher') }}</option>
                                    <option value="2">{{ __('messages.Receipt Vouche') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <thead>
                        <tr>
                            <th>{{__('messages.ID')}}</th>
                            <th>{{__('messages.Serial number')}}</th>
                            <th>{{__('messages.the value')}}</th>
                            <th>{{__('messages.transaction details')}}</th>
                            <th>{{__('messages.signatory name')}}</th>
                            <th>{{__('messages.Voucher Type')}}</th>
                            <th>{{__('messages.Date')}}</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Edit Modal --}}
<div class="modal fade" id="edit-modal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">{{ __('messages.Update User Data') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body row">
                <ul id="update_msgList"></ul>

                <input type="hidden" id="id" />
                <input type="hidden" id="type" />
                <input type="hidden" id="edit-has-restriction" value="0" />

                {{-- Payment voucher fields --}}
                <div id="payment-fields" style="display:none;" class="col-12 row">
                    <div class="form-group col-md-6">
                        <label for="to_user">{{__('messages.to user')}}</label>
                        <input type="text" id="to_user" class="form-control" />
                    </div>
                    <div class="form-group col-md-6">
                        <label for="cashier">{{__('messages.cashier name')}}</label>
                        <input type="text" id="cashier" class="form-control" />
                    </div>
                    <div class="form-group col-md-6">
                        <label for="accountant">{{__('messages.accountant name')}}</label>
                        <input type="text" id="accountant" class="form-control" />
                    </div>
                    <div class="form-group col-md-6">
                        <label for="financial_manager">{{__('messages.financial manager')}}</label>
                        <input type="text" id="financial_manager" class="form-control" />
                    </div>
                </div>

                {{-- Receipt voucher fields --}}
                <div id="receipt-fields" style="display:none;" class="col-12 row">
                    <div class="form-group col-md-6">
                        <label for="from_user">{{__('messages.from user')}}</label>
                        <input type="text" id="from_user" class="form-control" />
                    </div>
                </div>

                {{-- Common fields --}}
                <div class="form-group col-md-6">
                    <label for="amount">{{__('messages.amount')}}</label>
                    <input type="number" id="amount" class="form-control" step="0.001" />
                </div>

                <div class="form-group col-md-6">
                    <label for="transaction_details">{{__('messages.transaction details')}}</label>
                    <textarea id="transaction_details" class="form-control"></textarea>
                </div>

                <div class="form-group col-md-6">
                    <label for="signatory_name">{{__('messages.signatory name')}}</label>
                    <input type="text" id="signatory_name" class="form-control" />
                </div>

                <div class="col-12 mt-3">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="edit-create-accounting-entry" value="1" />
                        <label class="form-check-label" for="edit-create-accounting-entry">
                            {{__('messages.Create Accounting Entry')}}
                        </label>
                    </div>
                </div>

                <div id="edit-accounting-section" class="accounting-section col-12">

                    <div id="edit-restriction-notice" class="restriction-notice">
                        <i class="mdi mdi-alert-outline mt-1"></i>
                        <span>{{__('messages.This voucher has an existing accounting entry. Saving will create a reversal entry for the difference.')}}</span>
                    </div>

                    <h6 class="mb-3">{{__('messages.Accounting Entry Details')}}</h6>

                    <table class="table table-bordered" id="edit-entries-table">
                        <thead>
                            <tr>
                                <th style="width: 45%;">{{__('messages.Account')}}</th>
                                <th>{{__('messages.Debit')}}</th>
                                <th>{{__('messages.Credit')}}</th>
                                <th style="width: 60px;"></th>
                            </tr>
                        </thead>
                        <tbody id="edit-entries-body"></tbody>
                        <tfoot>
                            <tr class="entries-totals">
                                <td class="text-end">{{__('messages.Total')}}</td>
                                <td id="edit-total-dr">0</td>
                                <td id="edit-total-cr">0</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="4" id="edit-entries-balance-status"></td>
                            </tr>
                        </tfoot>
                    </table>

                    <button type="button" class="btn btn-sm btn-success" id="edit-add-entry-row">
                        + {{__('messages.Add Account')}}
                    </button>
                    <div id="edit_entries_error" style="color: red; display: none; margin-top: 8px;"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="update-button">{{ __('messages.Update') }}</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
            </div>
        </div>
    </div>
</div>
{{-- End Edit Modal --}}

{{-- Row template for the edit-modal entries table --}}
<template id="edit-entry-row-template">
    <tr class="entry-row">
        <td>
            <select class="form-control entry-account">
                <option value="">{{__('messages.Select Account')}}</option>
                @foreach($accounts as $account)
                    <option value="{{ $account->id }}">{{ $account->serial_number }} - {{ $account->name }}</option>
                @endforeach
            </select>
        </td>
        <td>
            <input type="number" step="0.001" min="0" class="form-control entry-dr" placeholder="0">
        </td>
        <td>
            <input type="number" step="0.001" min="0" class="form-control entry-cr" placeholder="0">
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-danger remove-entry-row">&times;</button>
        </td>
    </tr>
</template>

@endsection

@section("scripts")
<script>
const authenticatedUserName = `<span id="authenticated-user-id" style="font-size: 8px;">
    {{ Auth::user()->id ?? __('Guest') }}
</span>`;

var translations = {
    'ID':                          "{{__('messages.ID')}}",
    'amount':                      "{{__('messages.amount')}}",
    'from_user':                   "{{__('messages.from user')}}",
    'signatory_name':              "{{__('messages.signatory name')}}",
    'to_user':                     "{{__('messages.to user')}}",
    'Management':                  "{{__('messages.Management')}}",
    'Role':                        "{{__('messages.Role')}}",
    'transaction_details':         "{{__('messages.transaction details')}}",
    'transaction_details2':        "{{__('messages.transaction details2')}}",
    'Financial_Department':        "{{__('messages.Financial Department')}}",
    'Name_of_the_recipient':       "{{__('messages.Name of the recipient')}}",
    'financial_manager':           "{{__('messages.financial manager')}}",
    'Receipt_Voucher':             "{{__('messages.Receipt Vouche')}}",
    'Payment_Voucher':             "{{__('messages.Payment Voucher')}}",
    'accountant_name':             "{{__('messages.accountant name')}}",
    'cashier_name':                "{{__('messages.cashier name')}}",
    'signature':                   "{{__('messages.signature')}}",
    'title':                       "{{__('messages.Vouchers')}}",
    'date':                        "{{__('messages.date')}}",
    'CEO':                         "{{__('messages.CEO')}}",
    'Exchange_request':            "{{__('messages.Exchange request')}}",
    'financial_manager_not_name':  "{{__('messages.financial manager not name')}}",
    'serial_number':               "{{__('messages.Serial number')}}",
    'Voucher_Type':                "{{__('messages.Voucher Type')}}",
    'to-from-error':               "{{__('messages.To Date must be after From Date.')}}",
    'both-date-error':             "{{__('messages.Both From Date and To Date are required, or neither should be provided.')}}",
    'phone':                       "{{__('messages.phone')}}",
    'car_number':                  "{{__('messages.car number')}}",
    'Covenant':                    "{{__('messages.Covenant')}}",
    'balanced':                    "{{__('messages.Entry is balanced')}}",
    'not_balanced':                "{{__('messages.Entry is not balanced')}}",
    'total_not_equal_amount':      "{{__('messages.Entry total must equal the voucher amount')}}",
    'select_account':              "{{__('messages.Please select an account in every line')}}",
    'dr_or_cr':                    "{{__('messages.Each line must be either debit or credit, not both')}}",
    'min_two_lines':               "{{__('messages.At least two entry lines are required')}}",
};
</script>
<script type="module" src="{{asset('metronic/js/pages/voucher.js')}}"></script>
@endsection