@extends('layouts.admin')

@section('title', 'Add Bank Account')

@section('page-title', 'Add Bank Account')

@section('breadcrumbs')
    <a href="{{ route('admin.banking.overview') }}" class="hover:text-primary">Banking Overview</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">Add Bank Account</span>
@endsection

@section('content')
<form method="POST" action="{{ route('admin.banking.store') }}" class="max-w-3xl mx-auto">
    @csrf
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 text-gray-900">Bank Account Details</h2>
        </div>
        <div class="p-6 space-y-6">
            <!-- Row 1: Account name + Bank name -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="account_name" class="block text-sm font-medium text-gray-700 mb-2">
                        Account Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="account_name" name="account_name" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" placeholder="Enter account name">
                </div>
                <div>
                    <label for="bank_name" class="block text-sm font-medium text-gray-700 mb-2">
                        Bank Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="bank_name" name="bank_name" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" placeholder="Enter bank name">
                </div>
            </div>

            <!-- Row 2: Branch + Account type -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="branch_name" class="block text-sm font-medium text-gray-700 mb-2">Branch Name</label>
                    <input type="text" id="branch_name" name="branch_name" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" placeholder="Enter branch name">
                </div>
                <div>
                    <label for="account_type" class="block text-sm font-medium text-gray-700 mb-2">
                        Account Type <span class="text-red-500">*</span>
                    </label>
                    <select id="account_type" name="account_type" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow">
                        <option value="">Select account type</option>
                        <option value="savings">Savings</option>
                        <option value="current">Current</option>
                        <option value="fixed_deposit">Fixed Deposit</option>
                    </select>
                </div>
            </div>

            <!-- Row 3: Account number + IFSC -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="account_number" class="block text-sm font-medium text-gray-700 mb-2">
                        Account Number <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="account_number" name="account_number" required class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" placeholder="Enter account number">
                </div>
                <div>
                    <label for="routing_code" class="block text-sm font-medium text-gray-700 mb-2">IFSC/Routing Code</label>
                    <input type="text" id="routing_code" name="routing_code" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" placeholder="Enter IFSC or routing code">
                </div>
            </div>

            <!-- Row 4: Currency + Opening balance -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="currency" class="block text-sm font-medium text-gray-700 mb-2">Currency</label>
                    @php
                        $defaultCurrency = \App\Models\Currency::getDefaultCode();
                        $currencies = \App\Models\Currency::where('is_active', true)->orderBy('is_default', 'desc')->orderBy('name')->get();
                    @endphp
                    <select id="currency" name="currency" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow">
                        @foreach($currencies as $currency)
                            <option value="{{ $currency->code }}" {{ old('currency', $defaultCurrency) == $currency->code ? 'selected' : '' }}>
                                {{ $currency->code }} - {{ $currency->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="opening_balance" class="block text-sm font-medium text-gray-700 mb-2">Opening Balance</label>
                    <input type="number" id="opening_balance" name="opening_balance" step="0.01" value="0" class="w-full h-11 px-4 rounded-lg border border-gray-300 bg-white text-gray-900 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" placeholder="0.00">
                </div>
            </div>

            <!-- Active Status -->
            <div class="flex items-center justify-between p-4 bg-gray-50/50 rounded-lg">
                <div>
                    <p class="text-sm font-medium text-gray-900 text-gray-900">Active Status</p>
                    <p class="text-xs text-gray-500">Enable this account for transactions</p>
                </div>
                <label class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in cursor-pointer">
                    <input type="checkbox" name="is_active" value="1" checked class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 checked:border-primary transition-all duration-300"/>
                    <span class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-300 cursor-pointer transition-colors duration-300 bg-primary"></span>
                </label>
            </div>
        </div>

        <!-- Footer -->
        <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3">
            <a href="{{ route('admin.banking.overview') }}" class="px-5 py-2.5 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors">
                Cancel
            </a>
            <button type="submit" class="px-5 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-blue-600 shadow-sm transition-colors flex items-center gap-2">
                <span class="material-symbols-outlined text-lg">save</span>
                Save Bank Account
            </button>
        </div>
    </div>
</form>
@endsection