{{--
# ────────────── lee_gwena ──────────────
# Code by: ashley_gwena
# Created: 2026-03-12
# Notes: Transfer create form with preview fields
# ───────────────────────────────────────
--}}
@extends('layouts.master')

@section('title', 'Create Transfer')

@section('content')
@include('chart_of_accounts.partials.form-styles')
<div class="container py-4 coa-form">
    <div class="coa-header">
        <div>
            <h1 class="h3 mb-1">New Transfer</h1>
            <p>Prepare a trust or business transfer.</p>
        </div>
        <div class="coa-actions">
            <a href="{{ route('transfers.index') }}" class="btn btn-outline-secondary">Back</a>
        </div>
    </div>

    <form method="POST" action="{{ route('transfers.store') }}" class="card p-4 coa-card">
        @csrf
        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">Transfer Type</label>
                <select name="transfer_type" class="form-select" required>
                    <option value="" disabled {{ old('transfer_type') ? '' : 'selected' }}>Select type</option>
                    <option value="trust_to_business" {{ old('transfer_type') === 'trust_to_business' ? 'selected' : '' }}>Trust to Business</option>
                    <option value="business_to_trust" {{ old('transfer_type') === 'business_to_trust' ? 'selected' : '' }}>Business to Trust</option>
                    <option value="trust_to_trust" {{ old('transfer_type') === 'trust_to_trust' ? 'selected' : '' }}>Trust to Trust</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Client</label>
                <select name="client_id" class="form-select" required>
                    <option value="" disabled {{ old('client_id') ? '' : 'selected' }}>Select client</option>
                    @foreach($clients as $client)
                        <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>{{ $client->full_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Matter</label>
                <input type="text" name="matter_id" value="{{ old('matter_id') }}" class="form-control" placeholder="Matter ID">
            </div>
            <div class="col-md-6">
                <label class="form-label">Trust Account</label>
                <select name="source_account_id" class="form-select" required>
                    <option value="" disabled {{ old('source_account_id') ? '' : 'selected' }}>Select trust account</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->account_id }}" {{ old('source_account_id') == $account->account_id ? 'selected' : '' }}>
                            {{ $account->code }} - {{ $account->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6" id="destination_wrap" style="display:none;">
                <label class="form-label">Destination Trust Account</label>
                <select name="destination_account_id" class="form-select">
                    <option value="" disabled {{ old('destination_account_id') ? '' : 'selected' }}>Select destination trust account</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->account_id }}" {{ old('destination_account_id') == $account->account_id ? 'selected' : '' }}>
                            {{ $account->code }} - {{ $account->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Amount</label>
                <input type="number" step="0.01" name="amount" value="{{ old('amount') }}" class="form-control" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Reference</label>
                <input type="text" name="reference" value="{{ old('reference') }}" class="form-control">
            </div>
            <div class="col-md-4">
                <label class="form-label">Notes</label>
                <input type="text" name="notes" value="{{ old('notes') }}" class="form-control">
            </div>
        </div>

        <div class="mt-4">
            <h2 class="h6">Preview</h2>
            <div class="card p-3 coa-card" style="box-shadow:none;">
                <div class="row g-2 text-muted">
                    <div class="col-md-4"><strong>Client Trust Balance:</strong> —</div>
                    <div class="col-md-4"><strong>Trust Bank Balance:</strong> —</div>
                    <div class="col-md-4"><strong>Business Ledger Balance:</strong> {{ number_format($businessBalance ?? 0, 2) }}</div>
                </div>
            </div>
        </div>

        <div class="mt-4">
            <button class="btn btn-primary" type="submit">Submit Transfer</button>
        </div>
    </form>
</div>

<script>
    (function () {
        const typeSelect = document.querySelector('select[name="transfer_type"]');
        const destinationWrap = document.getElementById('destination_wrap');
        const destinationSelect = destinationWrap ? destinationWrap.querySelector('select') : null;

        const sync = () => {
            const isTrustToTrust = typeSelect && typeSelect.value === 'trust_to_trust';
            if (destinationWrap) {
                destinationWrap.style.display = isTrustToTrust ? 'block' : 'none';
            }
            if (!isTrustToTrust && destinationSelect) {
                destinationSelect.value = '';
            }
        };

        if (typeSelect) {
            typeSelect.addEventListener('change', sync);
            sync();
        }
    })();
</script>
@endsection