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

<!-- Back Link -->
<div class="d-flex justify-content-end pe-4 pt-2">
    <a href="{{ route('customerTransactions.index') }}" 
       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-{{ 
            $transaction->transaction_type=='invoice' ? 'primary' : 
            ($transaction->transaction_type=='credit_note' ? 'success' : 'info') 
          }} text-white">
          <h5 class="mb-0">
            <i class="fas {{ 
               $transaction->transaction_type=='invoice' ? 'fa-file-invoice' : 
               ($transaction->transaction_type=='credit_note' ? 'fa-sticky-note' : 'fa-file-alt') 
            }}"></i>
            Edit Transaction Type
          </h5>
        </div>
        <div class="card-body">
          @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.update', $transaction->id) }}" method="POST" id="transactionForm">
            @csrf
            @method('PUT')
            <input type="hidden" name="transaction_type" value="{{ $transaction->transaction_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" value="{{ $transaction->code }}" 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" value="{{ $transaction->description }}" 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" {{ $transaction->debit_credit == '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" {{ $transaction->debit_credit == 'credit' ? 'checked' : '' }}>
                    <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" {{ $transaction->use_tax ? 'checked' : '' }}>
                    <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">
                      {{ $transaction->debit_credit == 'debit' ? 'Debit' : 'Credit' }} (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 }}" {{ $transaction->debit_ledger_account_id == $acct->id ? 'selected' : '' }}>
                          {{ $acct->code }} – {{ $acct->account_name }}
                        </option>
                      @endforeach
                    </select>
                  </div>

                  <div class="mb-3">
                    <label class="form-label" id="creditLabel">
                      {{ $transaction->debit_credit == 'debit' ? 'Credit' : 'Debit' }} (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 }}" {{ $transaction->credit_ledger_account_id == $acct->id ? 'selected' : '' }}>
                          {{ $acct->code }} – {{ $acct->account_name }}
                        </option>
                      @endforeach
                    </select>
                  </div>

                  <div class="mb-3">
                    <label class="form-label" id="taxLabel">
                      {{ $transaction->debit_credit == 'debit' ? 'Credit (Tax Account)' : 'Debit (Tax Account)' }}
                    </label>
                    <select name="tax_account_id" class="form-control" id="tax_account" {{ $transaction->use_tax ? '' : 'disabled' }}>
                      <option value="">Select Tax Account</option>
                      @foreach($ledgerAccounts as $acct)
                        <option value="{{ $acct->id }}" {{ $transaction->tax_account_id == $acct->id ? 'selected' : '' }}>
                          {{ $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" {{ $transaction->always_prompt_credit ? 'checked' : '' }}>
                    <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" {{ $transaction->always_split_credit ? 'checked' : '' }}>
                    <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.create', ['type' => $transaction->transaction_type]) }}" class="btn btn-secondary me-2">Cancel</a>
              <button type="submit" class="btn btn-{{ 
                  $transaction->transaction_type=='invoice'?'primary':
                  ($transaction->transaction_type=='credit_note'?'success':'info')
                }}">Update</button>
            </div>
          </form>
        </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) {
      debitLabel.textContent = 'Debit (Ledger Account)';
      creditLabel.textContent = 'Credit (Ledger Account)';
      taxLabel.textContent = 'Credit (Tax Account)';
    } else {
      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;
    }
  });

  debitRadio.addEventListener('change', updateLabels);
  creditRadio.addEventListener('change', updateLabels);
  useTaxCheckbox.addEventListener('change', toggleTaxField);

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