@extends('layouts.master')
@section('content')

<!-- Back Link -->
<div class="d-flex justify-content-end pe-4 pt-2">
    <a href="{{ route('home') }}" 
       style="text-decoration: none; color: #1AB9D9; font-weight: 500; display: inline-flex; align-items: center; padding: 2px 18px;">
        <i class="fas fa-arrow-left me-2"></i> Back
    </a>
</div>

<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="card shadow-sm">
        <div class="card-header bg-{{ 
            $type=='invoice' ? 'primary' : 
            ($type=='credit_note' ? 'success' : 'info') 
          }} text-white">
          <h5 class="mb-0">
            <i class="fas {{ 
              $type=='invoice' ? 'fa-file-invoice' : 
              ($type=='credit_note' ? 'fa-sticky-note' : 'fa-file-alt') 
            }}"></i>
            Customer Transaction Type
          </h5>
        </div>
        <div class="card-body">

          {{-- Success Alert --}}
          @if(session('success'))
            <div class="alert alert-success">
              {{ session('success') }}
            </div>
          @endif

          @if ($errors->any())
            <div class="alert alert-danger">
              <ul>
                @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
            </div>
          @endif
          
          <form action="{{ route('customerTransactions.store') }}" method="POST" id="transactionForm">
            @csrf
            <input type="hidden" name="transaction_type" value="{{ $type }}">

            <div class="row">
              <!-- left column -->
              <div class="col-md-6">

                <!-- Transaction Type Fieldset -->
                <fieldset class="border p-3 mb-3">
                  <legend class="float-none w-auto px-2">Transaction Type</legend>
                  <div class="mb-3">
                    <label class="form-label">Code <span class="text-danger">*</span></label>
                    <input type="text" name="code" class="form-control" required>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Description <span class="text-danger">*</span></label>
                    <input type="text" name="description" class="form-control" required>
                  </div>
                </fieldset>

                <!-- Debit/Credit Fieldset -->
                <fieldset class="border p-3 mb-3">
                  <legend class="float-none w-auto px-2">Debit / Credit</legend>
                  <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="debit_credit" id="debit" value="debit" checked>
                    <label class="form-check-label" for="debit">Debit</label>
                  </div>
                  <div class="form-check mb-2">
                    <input class="form-check-input" type="radio" name="debit_credit" id="credit" value="credit">
                    <label class="form-check-label" for="credit">Credit</label>
                  </div>
                </fieldset>

                <!-- Tax Checkbox -->
                <fieldset class="border p-3 mb-3">
                  <legend class="float-none w-auto px-2">Tax</legend>
                  <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="use_tax" name="use_tax" value="1">
                    <label class="form-check-label" for="use_tax">Use Tax</label>
                  </div>
                </fieldset>
              </div>

              <!-- right column -->
              <div class="col-md-6">
                <fieldset class="border p-3 mb-3">
                  <legend class="float-none w-auto px-2">General Ledger Accounts</legend>

                  <div class="mb-3">
                    <label class="form-label" id="debitLabel">Debit (Ledger Account)</label>
                    <select name="debit_ledger_account_id" class="form-control" required>
                      <option value="">Select Account</option>
                      @foreach($ledgerAccounts as $acct)
                         <option value="{{ $acct->id }}">{{ $acct->code }} – {{ $acct->account_name }}</option>
                      @endforeach
                    </select>
                  </div>

                  <div class="mb-3">
                    <label class="form-label" id="creditLabel">Credit (Ledger Account)</label>
                    <select name="credit_ledger_account_id" class="form-control" required>
                      <option value="">Select Account</option>
                      @foreach($ledgerAccounts as $acct)
                         <option value="{{ $acct->id }}">{{ $acct->code }} – {{ $acct->account_name }}</option>
                      @endforeach
                    </select>
                  </div>

                  <div class="mb-3">
                    <label class="form-label" id="taxLabel">Credit (Tax Account)</label>
                    <select name="tax_account_id" class="form-control" id="tax_account" disabled>
                      <option value="">Select Tax Account</option>
                      @foreach($ledgerAccounts as $acct)
                         <option value="{{ $acct->id }}">{{ $acct->code }} – {{ $acct->account_name }}</option>
                      @endforeach
                    </select>
                  </div>

                  <div class="form-check mb-1">
                    <input class="form-check-input" type="checkbox" name="always_prompt_credit" id="always_prompt_credit" value="1">
                    <label class="form-check-label" for="always_prompt_credit">Always Prompt for Credit Ledger Account</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="always_split_credit" id="always_split_credit" value="1">
                    <label class="form-check-label" for="always_split_credit">Always Split Credit Ledger Account</label>
                  </div>
                </fieldset>
              </div>
            </div>

            <!-- Footer buttons -->
            <div class="text-end">
              <a href="{{ route('customerTransactions.index') }}" class="btn btn-secondary me-2">Cancel</a>
              <button type="submit" class="btn btn-{{ 
                  $type=='invoice'?'primary':
                  ($type=='credit_note'?'success':'info')
                }}">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  <br><br>
  
  <div class="row">
    <div class="col-md-12">
      <div class="card shadow-sm">
        <div class="card-header bg-light">
          <h6 class="mb-0">Existing {{ ucfirst(str_replace('_', ' ', $type)) }}s</h6>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-bordered table-hover">
              <thead class="table-{{ 
                $type == 'invoice' ? 'primary' : 
                ($type == 'credit_note' ? 'success' : 'info') 
              }}">
                <tr>
                  <th>Code</th>
                  <th>Description</th>
                  <th>Ledger Account 1</th>
                  <th>Ledger Account 2</th>
                  <th>Tax Account</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                @foreach($transactions as $transaction)
                  <tr>
                    <td>{{ $transaction->code }}</td>
                    <td>{{ $transaction->description }}</td>
                    <td>{{ $transaction->debitLedgerAccount->account_name ?? 'N/A' }}</td>
                    <td>{{ $transaction->creditLedgerAccount->account_name ?? 'N/A' }}</td>
                    <td>
                      @if($transaction->taxAccount)
                        {{ $transaction->taxAccount->code }} - {{ $transaction->taxAccount->account_name }}
                      @else
                        N/A
                      @endif
                    </td>
                    <td>
                      <a href="{{ route('customerTransactions.edit', $transaction->id) }}" 
                         class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-edit"></i>
                      </a>
                      <form action="{{ route('customerTransactions.destroy', $transaction->id) }}" 
                            method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" 
                                onclick="return confirm('Are you sure?')">
                          <i class="fas fa-trash"></i>
                        </button>
                      </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('transactionForm');
  const debitRadio = document.getElementById('debit');
  const creditRadio = document.getElementById('credit');
  const debitLabel = document.getElementById('debitLabel');
  const creditLabel = document.getElementById('creditLabel');
  const taxLabel = document.getElementById('taxLabel');
  const useTaxCheckbox = document.getElementById('use_tax');
  const taxAccountField = document.getElementById('tax_account');

  function updateLabels() {
    if (debitRadio.checked) {
      // For debit transactions
      debitLabel.textContent = 'Debit (Ledger Account)';
      creditLabel.textContent = 'Credit (Ledger Account)';
      taxLabel.textContent = 'Credit (Tax Account)';
    } else {
      // For credit transactions
      debitLabel.textContent = 'Credit (Ledger Account)';
      creditLabel.textContent = 'Debit (Ledger Account)';
      taxLabel.textContent = 'Debit (Tax Account)';
    }
  }

  function toggleTaxField() {
    taxAccountField.disabled = !useTaxCheckbox.checked;
    if (!useTaxCheckbox.checked) {
      taxAccountField.value = '';
    }
  }

  // Enable disabled fields before form submission
  form.addEventListener('submit', function() {
    if (taxAccountField.disabled) {
      taxAccountField.disabled = false;
    }
  });

  // Add event listeners
  debitRadio.addEventListener('change', updateLabels);
  creditRadio.addEventListener('change', updateLabels);
  useTaxCheckbox.addEventListener('change', toggleTaxField);

  // Initialize on load
  updateLabels();
  toggleTaxField();
});
</script>
@endsection