@extends('layouts.admin')

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

@section('page-title', 'Create Account')

@section('content')
<form method="POST" action="{{ route('admin.chart-of-accounts.store') }}" class="max-w-2xl mx-auto">
    @csrf

    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6 space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Account Code <span class="text-red-500">*</span></label>
                <input type="text" name="code" required value="{{ old('code') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Account Name <span class="text-red-500">*</span></label>
                <input type="text" name="name" required value="{{ old('name') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Type <span class="text-red-500">*</span></label>
                <select name="type" required class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="asset" {{ old('type') == 'asset' ? 'selected' : '' }}>Asset</option>
                    <option value="liability" {{ old('type') == 'liability' ? 'selected' : '' }}>Liability</option>
                    <option value="equity" {{ old('type') == 'equity' ? 'selected' : '' }}>Equity</option>
                    <option value="revenue" {{ old('type') == 'revenue' ? 'selected' : '' }}>Revenue</option>
                    <option value="expense" {{ old('type') == 'expense' ? 'selected' : '' }}>Expense</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Category</label>
                <input type="text" name="category" value="{{ old('category') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Parent Account</label>
                <select name="parent_id" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="">None</option>
                    @foreach($parentAccounts as $parent)
                        <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>{{ $parent->code }} - {{ $parent->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Opening Balance</label>
                <input type="number" name="opening_balance" step="0.01" value="{{ old('opening_balance', 0) }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Description</label>
            <textarea name="description" rows="3" class="w-full rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">{{ old('description') }}</textarea>
        </div>
        <div class="flex gap-3 pt-4">
            <a href="{{ route('admin.chart-of-accounts.index') }}" class="px-6 py-2.5 rounded-lg border border-[#dbe0e6] text-[#617589] font-medium hover:bg-background-light transition-colors">Cancel</a>
            <button type="submit" class="px-8 py-2.5 rounded-lg bg-primary text-white font-bold hover:bg-blue-600 transition-all flex items-center gap-2">
                Create Account <span class="material-symbols-outlined text-lg">save</span>
            </button>
        </div>
    </div>
</form>
@endsection



