@extends('layouts.master')

@section('page_title', 'Create Account')

@section('content')
<div class="">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h4>Create New Account</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('accounts.store') }}" method="POST">
                        @csrf
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Account Name *</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="account_code" class="form-label">Account Code *</label>
                            <input type="text" class="form-control @error('account_code') is-invalid @enderror" 
                                   id="account_code" name="account_code" value="{{ old('account_code') }}" maxlength="20" 
                                   placeholder="Enter account account_code (e.g., CASH001)" required>
                            <div class="form-text">Maximum 20 characters. Will auto-generate from account name if left empty.</div>
                            @error('account_code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="account_type_id" class="form-label">Account Type *</label>
                            <select class="form-select @error('account_type_id') is-invalid @enderror" 
                                    id="account_type_id" name="account_type_id" required>
                                <option value="">Select Account Type</option>
                                @if(isset($accountTypes))
                                    @foreach($accountTypes as $type)
                                        <option value="{{ $type->id }}" {{ old('account_type_id') == $type->id ? 'selected' : '' }}>
                                            {{ $type->name }} ({{ $type->category }})
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @error('account_type_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="parent_id" class="form-label">Parent Account</label>
                            <select class="form-select @error('parent_id') is-invalid @enderror" 
                                    id="parent_id" name="parent_id">
                                <option value="">No Parent Account</option>
                                @if(isset($parentAccounts))
                                    @foreach($parentAccounts as $account)
                                        <option value="{{ $account->id }}" {{ old('parent_id') == $account->id ? 'selected' : '' }}>
                                            {{ $account->name }} ({{ $account->code }})
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            @error('parent_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="opening_balance" class="form-label">Opening Balance *</label>
                            <input type="number" step="0.01" class="form-control @error('opening_balance') is-invalid @enderror" 
                                   id="opening_balance" name="opening_balance" value="{{ old('opening_balance', 0) }}" required>
                            <div class="form-text">The starting balance for this account.</div>
                            @error('opening_balance')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="is_active" name="is_active" 
                                   value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                Active Account
                            </label>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('accounts.index') }}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">Create Account</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const nameInput = document.getElementById('name');
    const codeInput = document.getElementById('code');
    const accountTypeSelect = document.getElementById('account_type_id');
    
    // Auto-generate code from name when name changes and code is empty
    nameInput.addEventListener('input', function() {
        if (codeInput.value.trim() === '') {
            const code = this.value
                .toUpperCase()
                .replace(/[^A-Z0-9]/g, '')
                .substring(0, 20);
            codeInput.value = code;
        }
    });
    
    // Ensure code is not empty when form is submitted
    document.querySelector('form').addEventListener('submit', function(e) {
        if (codeInput.value.trim() === '') {
            e.preventDefault();
            codeInput.focus();
            alert('Account code is required. Please enter a code or let it auto-generate from the account name.');
            return false;
        }
    });
    
    // Format code input as user types
    codeInput.addEventListener('input', function() {
        this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
    });
});
</script>
@endpush