@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;
}
.entries-table select { min-width: 200px; }
.entries-table input[type="number"] { min-width: 110px; }
.entries-totals td { font-weight: bold; background: #f1f1f1; }
.entries-balance-ok { color: green; font-weight: bold; }
.entries-balance-error { color: red; font-weight: bold; }
.spinner {
  width: 5em;
  height: 5em;
  border: 0.5em solid rgba(0, 0, 0, 0.1);
  border-left-color: #8daf21;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 99999;
}
.spinner-layer {
    position: fixed;
    width: calc(100vw - 260px); 
    height:  calc(100vh - 70px);
    background: #f2edf3;
    z-index:999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    gap: 10px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
@endsection

@section("main-content")
<div class="content-wrapper">
    <div class="page-header" style="margin-bottom: 30px;">
        <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.Add Voucher') }}
        </h3>
    </div>
    
    <input type="hidden" value="{{ route('accounting.voucher.index') }}" data-redirect="index-vocher">
     
<div class="container" id="AddCategoryModal">
    <div class="">
        <div class="modal-content" style="background: #fbfbfb;">
            <div class="modal-header">
             <div class="col-12">
                <div class="modal-body row">
                    <ul id="save_msgList"></ul>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mx-auto">
                                <ul class="nav nav-pills nav-pills-custom justify-content-center" id="pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-health" role="tab" aria-controls="pills-home" aria-selected="true">{{__('messages.Payment voucher data')}}</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-career" role="tab" aria-controls="pills-profile" aria-selected="false">{{__('messages.Receipt voucher data')}} </a>
                                    </li>
                                </ul>
                                
                                <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-health" role="tabpanel" aria-labelledby="pills-home-tab">
                                        <div class="item-container">
                                            <div class="row">
                                                <div class="" id="date_error" style="color: red;"></div>     
                                                 
<form id="receiptVoucherForm" method="post" action="{{ route('accounting.vouchers.store') }}">
    @csrf
    <input type="hidden" name="voucher_type" value="receipt">
    <div class="row">
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.from user') }}</label>
            <input class="form-control" type="text" name="from_user">
            <div class="error-message" id="from_user_error" style="color: red; display: none;"></div>
        </div>
        
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.the value') }}</label>
            <input class="form-control voucher-amount" type="number" name="amount" step="0.001">
            <div class="error-message" id="amount_error" style="color: red; display: none;"></div>
        </div>
        
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.transaction details') }}</label>
            <input class="form-control" type="text" name="transaction_details">
            <div class="error-message" id="transaction_details_error" style="color: red; display: none;"></div>
        </div>
        
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.signatory name') }}</label>
            <input class="form-control" type="text" name="signatory_name">
            <div class="error-message" id="signatory_name_error" style="color: red; display: none;"></div>
        </div>
    </div>
    
    <div class="row">
        <div class="form-group col-md-2">
            <div class="form-check">
                <input type="checkbox" class="form-check-input create-accounting-entry" id="create_accounting_entry_receipt" name="create_accounting_entry" value="1">
                <label class="form-check-label" for="create_accounting_entry_receipt">
                    {{__('messages.Create Accounting Entry')}}
                </label>
            </div>
        </div>
    </div>

    <div id="accounting-section-receipt" class="accounting-section col-md-12">
        <h6>{{__('messages.Accounting Entry Details')}}</h6>

        <table class="table table-bordered 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 class="entries-body"></tbody>
            <tfoot>
                <tr class="entries-totals">
                    <td class="text-end">{{__('messages.Total')}}</td>
                    <td class="total-dr">0</td>
                    <td class="total-cr">0</td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="4" class="entries-balance-status"></td>
                </tr>
            </tfoot>
        </table>

        <button type="button" class="btn btn-sm btn-success add-entry-row">
            + {{__('messages.Add Account')}}
        </button>
        <div class="error-message" id="entries_error" style="color: red; display: none;"></div>
    </div>
    
    <div class="mb-3 mx-1 row justify-content-between">
        <button type="submit" class="btn btn-primary col-md-2">{{ __('messages.Submit') }}</button>    
    </div>
</form>
                                            </div>
                                        </div> 
                                    </div>
                                    
                                    <div class="tab-pane fade" id="pills-career" role="tabpanel" aria-labelledby="pills-profile-tab">
                                        <div class="item-container">
                                            <div class="row">
<form id="paymentVoucherForm" method="post" action="{{ route('accounting.vouchers.store') }}">
    @csrf
    <input type="hidden" name="voucher_type" value="payment">
    <div class="row">
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.to user') }}</label>
            <input name="to_user" class="form-control" type="text">
            <div class="error-message" id="to_user_error" style="color: red; display: none;"></div>
        </div>
        
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.the value') }}</label>
            <input name="amount" class="form-control voucher-amount" type="number" step="0.001">
            <div class="error-message" id="amount_error" style="color: red; display: none;"></div>
        </div>
        
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.cashier name') }}</label>
            <input name="cashier" class="form-control" type="text">
            <div class="error-message" id="cashier_error" style="color: red; display: none;"></div>
        </div>
    </div>
    <div class="row">
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.financial manager') }}</label>
            <input name="financial_manager" class="form-control" type="text">
            <div class="error-message" id="financial_manager_error" style="color: red; display: none;"></div>
        </div>
        
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.transaction details') }}</label>
            <input name="transaction_details" class="form-control" type="text">
            <div class="error-message" id="transaction_details_error" style="color: red; display: none;"></div>
        </div>
        
        <div class="form-group my-3 col-md-4">
            <label class="required">{{ __('messages.signatory name') }}</label>
            <input name="signatory_name" class="form-control" type="text">
            <div class="error-message" id="signatory_name_error" style="color: red; display: none;"></div>
        </div>
    </div>
    
    <div class="row">
        <div class="form-group col-md-2">
            <div class="form-check">
                <input type="checkbox" class="form-check-input create-accounting-entry" id="create_accounting_entry_payment" name="create_accounting_entry" value="1">
                <label class="form-check-label" for="create_accounting_entry_payment">
                    {{__('messages.Create Accounting Entry')}}
                </label>
            </div>
        </div>
    </div>

    <div id="accounting-section-payment" class="accounting-section col-md-12">
        <h6>{{__('messages.Accounting Entry Details')}}</h6>

        <table class="table table-bordered 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 class="entries-body"></tbody>
            <tfoot>
                <tr class="entries-totals">
                    <td class="text-end">{{__('messages.Total')}}</td>
                    <td class="total-dr">0</td>
                    <td class="total-cr">0</td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="4" class="entries-balance-status"></td>
                </tr>
            </tfoot>
        </table>

        <button type="button" class="btn btn-sm btn-success add-entry-row">
            + {{__('messages.Add Account')}}
        </button>
        <div class="error-message" id="entries_error" style="color: red; display: none;"></div>
    </div>
    
    <div class="mb-3 mx-1 row justify-content-between">
        <button type="submit" class="btn btn-primary col-md-2">{{ __('messages.Submit') }}</button>    
    </div>
</form>
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</div>

{{-- Row template shared by both forms --}}
<template id="entry-row-template">
    <tr class="entry-row">
        <td>
            <select data-name="account_id" 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" data-name="dr" class="form-control entry-dr" placeholder="0">
        </td>
        <td>
            <input type="number" step="0.001" min="0" data-name="cr" 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>

<div class="spinner-layer d-none">    
    <div class="spinner"></div>
    <p class="fs-3">{{__('messages.Processing')}}</p>
</div> 

</div>
@endsection

@section("scripts")
<script>
const authenticatedUserName = `<span id="authenticated-user-id" style="font-size: 8px;"> 
    {{ Auth::user()->id ?? __('Guest') }}
</span>`;
var translations = {
    'amount':"{{__('messages.amount')}}",
    'from_user':"{{__('messages.from user')}}",
    'signatory_name':"{{__('messages.signatory name')}}",
    'to_user':"{{__('messages.to user')}}",
    'transaction_details':"{{__('messages.transaction details')}}",
    '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.Voucher')}}",
    'date':"{{__('messages.date')}}",
    '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/create-voucher.js')}}"></script> 
@endsection