@extends('layouts.master')
@section('title')
    @lang('translation.settings')
@endsection
@section('content')



<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">Cash In/Out</h5>
        </div>
    </div>
</div>
@if (session('success'))
    <div class="alert alert-success alert-solid" role="alert" id="success-alert">
        <strong>{{ session('success') }} </strong>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif
<div class="row justify-content-center">
  <div class="col-xxl-8">
    <div style="background:#9da0ff12; padding: 20px; border-radius: 10px;">
      
      <!-- Tabs -->
      <ul class="nav nav-tabs nav-tabs-custom rounded card-header-tabs border-bottom-0 mb-4" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-bs-toggle="tab" href="#cashin" role="tab">
            <i class="fas fa-home"></i> Cash In
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link " data-bs-toggle="tab" href="#cashout" role="tab">
            <i class="far fa-user"></i> Cash Out
          </a>
        </li>
      </ul>

      <!-- Tab Contents -->
      <div class="tab-content">
        <!-- Cash In Tab -->
        <div class="tab-pane fade show active" id="cashin" role="tabpanel">
          <form method="POST" action="{{ route('cash.requestCashIn') }}">
            @csrf
            <div class="row">
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Cashier Location ID</label>
                <input class="form-control bg-light" readonly placeholder="{{ session('loc') }}" />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Salesman / User ID</label>
                <input class="form-control bg-light" readonly placeholder="{{ auth()->user()->email }}" />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Amount</label>
                <input class="form-control bg-light" id="amount_cashin" name="amount_cashin" placeholder="Amount" onchange="validateAmountCashIn(this)" />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Remark</label>
                <textarea class="form-control bg-light" name="remark" rows="4" cols="50"></textarea>
              </div>
              <div class="col-12 text-center">
                <button type="button" class="btn btn-primary btn-label rounded-pill" id="btnSubmitCashIn" disabled>
                  <i class="ri-money-dollar-circle-line label-icon align-middle rounded-pill fs-16 me-2"></i>Confirm Cash In
                </button>
              </div>
            </div>
          </form>
        </div>

        <!-- Cash Out Tab -->
        <div class="tab-pane fade " id="cashout" role="tabpanel">
        <form method="POST" action="{{ route('cash.requestCashOut') }}">
          @csrf
          <div class="row">
            <div class="col-lg-12 col-sm-12 mb-3">
              <label>Cashier Location ID</label>
              <input class="form-control bg-light" readonly placeholder="{{ session('loc') }}" />
            </div>
            <div class="col-lg-12 col-sm-12 mb-3">
              <label>Salesman / User ID</label>
              <input class="form-control bg-light" readonly placeholder="{{ auth()->user()->email }}" />
            </div>
        
            <div class="col-lg-12 col-sm-12 mb-3">
              <label>Transaction Type</label>
              <select class="form-select bg-light" name="remark_cashout" id="remark_cashout" onchange="clearAmountCashOut()">
                <option value="" disabled selected>Select Remark Type</option>
                <option value="Supplier" hidden>Supplier</option>
                <option value="BankIn">Bank in</option>
                <option value="Utility" hidden>Utility</option>
                <option value="Contractor" hidden>Contractor</option>
                <option value="Refund">Refund Customer</option>
              </select>
            </div>
        
            <!-- Supplier Fields -->
            <div class="supplier-fields d-none">
              <div class="col-lg-12 col-sm-12">
                <label style="display:none">Supplier Name</label>
                <input class="form-control" placeholder="Supplier Name" name="name_supplier" hidden/>
              </div>
              <div class="col-lg-12 col-sm-12">
                <label style="display:none">Document No</label>
                <input class="form-control" placeholder="Document No" name="document_no_supplier" hidden />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Amount</label>
                <input type="number" class="form-control" placeholder="Amount" id="amount_supplier" name="amount_supplier" onchange="validateAmountCashOut(this)"/>
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Remark</label>
                <textarea class="form-control bg-light" name="remark_supplier" rows="4" cols="50"></textarea>
              </div>
            </div>
        
            <!-- Bank In Fields -->
            <div class="bankin-fields d-none">
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Bank</label>
                <select class="form-select" onchange="changeBankAccount(this)" >
                  <option selected disabled>Select Bank</option>
                  @foreach($banks as $bank)
                    <option value="{{ $bank['BankAccount'] }}">{{ $bank['BankAccountName'] }}</option>
                  @endforeach
         
                </select>
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Bank Account</label>
                <input class="form-control" placeholder="Bank Account" id="bank_account" name="bank_account" readonly/>
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Reference Number</label>
                <input class="form-control" placeholder="Reference Number" name="reference_slip_bank"  />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Date</label>
                <input type="datetime-local" class="form-control" name="date_bank" value="{{ \Carbon\Carbon::now()->format('Y-m-d\TH:i') }}" />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Amount</label>
                <input type="number" class="form-control" placeholder="Amount" id="amount_bank" name="amount_bank" step="0.01" min="0" onchange="validateAmountCashOut(this)" />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Remark</label>
                <textarea class="form-control bg-light" name="remark_bank" rows="4" cols="50"></textarea>
              </div>
            </div>
        
            <!-- Utility Fields -->
            <div class="utility-fields d-none">
              <div class="col-lg-12 col-sm-12">
                <label style="display:none">Utility Provider</label>
                <select class="form-select" name="utility_provider" hidden>
                  <option selected disabled>Select Provider</option>
                  <option>TNB</option>
                  <option>Indah Water</option>
                </select>
              </div>
              <div class="col-lg-12 col-sm-12">
                <label style="display:none">Reference Slip</label>
                <input class="form-control" placeholder="Reference Slip" name="reference_slip_utility" hidden />
              </div>
              <div class="col-lg-12 col-sm-12">
                <label style="display:none">Date</label>
                <input type="date" class="form-control" name="date_utility" value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" hidden/>
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Amount</label>
                <input type="number" class="form-control" placeholder="Amount" id="amount_utility" name="amount_utility" onchange="validateAmountCashOut(this)" />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Remark</label>
                <textarea class="form-control bg-light" name="remark_utility" rows="4" cols="50"></textarea>
              </div>
            </div>
        
            <!-- Contractor Fields -->
            <div class="contractor-fields d-none">
              <div class="col-lg-12 col-sm-12">
                <label style="display:none">Document No</label>
                <input class="form-control" placeholder="Document No" name="document_no_contractor" hidden/>
              </div>
              <div class="col-lg-12 col-sm-12">
                <label style="display:none">Contractor ID</label>
                <input class="form-control" placeholder="Contractor ID" name="contractor_id" hidden/>
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Amount</label>
                <input type="number" class="form-control" placeholder="Amount" id="amount_contractor" name="amount_contractor" step="0.01" min="0" onchange="validateAmountCashOut(this)"/>
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Remark</label>
                <textarea class="form-control bg-light" name="remark_contractor" rows="4" cols="50"></textarea>
              </div>
            </div>
        
            <!-- Refund Fields -->
            <div class="refund-fields d-none">
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Customer Name</label>
                <input class="form-control" placeholder="Customer Name" name="customer_name" />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3" hidden>
                <label>Document No</label>
                <input class="form-control" placeholder="Document No" name="document_no_refund" />
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Remark</label>
                <textarea class="form-control bg-light" name="remark_refund" rows="4" cols="50"></textarea>
              </div>
              <div class="col-lg-12 col-sm-12 mb-3">
                <label>Amount</label>
                <input class="form-control" placeholder="Amount" id="amount_refund" name="amount_refund" onchange="validateAmountCashOut(this)"/>
              </div>
            </div>
        
            <div class="col-12 text-center mt-3">
              <button type="button" id="btnSubmitCashOut" class="btn btn-primary btn-label rounded-pill" disabled>
                <i class="ri-money-dollar-circle-line label-icon align-middle rounded-pill fs-16 me-2"></i>Confirm Cash Out
              </button>
            </div>
          </div>
        </div>
        </form>
        
        
        

      </div> <!-- /.tab-content -->
    </div>
  </div>
</div>

<div class="row justify-content-center mt-4">
  <div class="col-xxl-8">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">Cash Transactions Today</h5>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-bordered mb-0">
            <thead class="table-light">
              <tr>
                <th>Ref No.</th>
                <th>Type</th>
                <th>Amount</th>
                <th>User</th>
                <th>Remark</th>
              </tr>
            </thead>
            <tbody>
              @forelse($transactions as $key=>$txn)
                <tr>
                  <td>{{ $txn['DocumentNo'] }}</td>
                  <td>@if($txn['type'] == 'I') Cash In @else Cash Out @endif</td>
                    <td>
                    <span style="color: {{ $txn['type'] == 'I' ? 'green' : 'red' }};">
                      {{ number_format($txn['amount'], 2) }}
                    </span>
                    </td>
                  <td>{{ $txn['data']['Username'] }}</td>
                  <td>{{ $txn['data']['Notes'] }}</td>
                  
                </tr>
              @empty
                <tr>
                  <td colspan="5" class="text-center">No transactions found.</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection
@section('script')
    <script src="{{ URL::asset('build/js/pages/profile-setting.init.js') }}"></script>
    <script src="{{ URL::asset('build/js/app.js') }}"></script>
    <script>
          document.getElementById('remark_cashout').addEventListener('change', function () {
            const types = ['Supplier', 'BankIn', 'Utility', 'Contractor', 'Refund'];
        
            types.forEach(type => {
              const section = document.querySelector(`.${type.toLowerCase()}-fields`);
              if (section) {
                section.classList.add('d-none');
              }
            });
        
            const selected = this.value;
            const selectedSection = document.querySelector(`.${selected.toLowerCase()}-fields`);
            if (selectedSection) {
              selectedSection.classList.remove('d-none');
            }
          });

          document.getElementById('btnSubmitCashIn').addEventListener('click', function (e) {
            if (confirm('Are you sure you want to submit Cash In?')) {
              callLoaddingScreen('Sending request. Do not close this window...');
              this.closest('form').submit();

            }
          });

          document.getElementById('btnSubmitCashOut').addEventListener('click', function (e) {
            if (confirm('Are you sure you want to submit Cash Out?')) {
              callLoaddingScreen('Sending request. Do not close this window...');
              this.closest('form').submit();
            }
          });
        </script>
    <script>
      function changeBankAccount(selectObj) {
        var selectedBankAccount = selectObj.value;
        document.getElementById('bank_account').value = selectedBankAccount;

      }

      function validateAmountCashIn(input) {
        let inputAmount = input.value;
        const btnSubmit = document.getElementById('btnSubmitCashIn');
        const amount = parseFloat(inputAmount);
        
        if (!isNaN(amount) && amount > 0) {
          btnSubmit.disabled = false;
          input.style.border = '';
        } else {
          btnSubmit.disabled = true;
          input.style.border = '2px solid red';
        }

      }

      function clearAmountCashOut(){
        document.getElementById('amount_supplier').value = '';
        document.getElementById('amount_bank').value = '';
        document.getElementById('amount_utility').value = '';
        document.getElementById('amount_contractor').value = '';
        document.getElementById('amount_refund').value = '';
        document.getElementById('btnSubmitCashOut').disabled = true;
      }

      function validateAmountCashOut(input) {
        let inputAmount = input.value;
        const btnSubmit = document.getElementById('btnSubmitCashOut');
        const amount = parseFloat(inputAmount);
        
        if (!isNaN(amount) && amount > 0) {
          btnSubmit.disabled = false;
          input.style.border = '';
          
        } else {

          input.style.border = '2px solid red';
          btnSubmit.disabled = true;
        }

      }
    </script>
@endsection