@extends('layouts.master')

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

@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 Type</h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('account-types.store') }}" method="POST">
                        @csrf
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Account Type 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="code" class="form-label">Account Type Code *</label>
                            <input type="text" class="form-control @error('code') is-invalid @enderror" 
                                   id="code" name="code" value="{{ old('code') }}" maxlength="10" required>
                            <div class="form-text">Maximum 10 characters. This code will be used to identify the account type.</div>
                            @error('code')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="category" class="form-label">Category *</label>
                            <select class="form-select @error('category') is-invalid @enderror" 
                                    id="category" name="category" required>
                                <option value="">Select Category</option>
                                <option value="asset" {{ old('category') == 'asset' ? 'selected' : '' }}>Asset</option>
                                <option value="liability" {{ old('category') == 'liability' ? 'selected' : '' }}>Liability</option>
                                <option value="equity" {{ old('category') == 'equity' ? 'selected' : '' }}>Equity</option>
                                <option value="revenue" {{ old('category') == 'revenue' ? 'selected' : '' }}>Revenue</option>
                                <option value="expense" {{ old('category') == 'expense' ? 'selected' : '' }}>Expense</option>
                            </select>
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="normal_balance" class="form-label">Normal Balance *</label>
                            <select class="form-select @error('normal_balance') is-invalid @enderror" 
                                    id="normal_balance" name="normal_balance" required>
                                <option value="">Select Normal Balance</option>
                                <option value="debit" {{ old('normal_balance') == 'debit' ? 'selected' : '' }}>Debit</option>
                                <option value="credit" {{ old('normal_balance') == 'credit' ? 'selected' : '' }}>Credit</option>
                            </select>
                            @error('normal_balance')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="parent_account_type_id" class="form-label">Parent Account Type</label>
                            <select class="form-select @error('parent_account_type_id') is-invalid @enderror" 
                                    id="parent_account_type_id" name="parent_account_type_id">
                                <option value="">No Parent (Main Category)</option>
                                @foreach($parentTypes as $parent)
                                    <option value="{{ $parent->id }}" {{ old('parent_account_type_id') == $parent->id ? 'selected' : '' }}>
                                        {{ $parent->name }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="form-text">Optional: Select a parent account type to create a sub-category.</div>
                            @error('parent_account_type_id')
                                <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 Type
                            </label>
                        </div>

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

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-suggest normal balance based on category
    const categorySelect = document.getElementById('category');
    const normalBalanceSelect = document.getElementById('normal_balance');
    
    categorySelect.addEventListener('change', function() {
        const category = this.value;
        let suggestedBalance = '';
        
        switch(category) {
            case 'asset':
            case 'expense':
                suggestedBalance = 'debit';
                break;
            case 'liability':
            case 'equity':
            case 'revenue':
                suggestedBalance = 'credit';
                break;
        }
        
        if (suggestedBalance && normalBalanceSelect.value === '') {
            normalBalanceSelect.value = suggestedBalance;
        }
    });
    
    // Auto-generate code from name
    const nameInput = document.getElementById('name');
    const codeInput = document.getElementById('code');
    
    nameInput.addEventListener('input', function() {
        if (codeInput.value === '') {
            const code = this.value
                .toUpperCase()
                .replace(/[^A-Z0-9]/g, '')
                .substring(0, 10);
            codeInput.value = code;
        }
    });
});
</script>
@endpush