@extends('layouts.app')

@section('title', 'إضافة حساب بنكي جديد')

@section('content')
<div class="container m-auto p-4 sm:p-6 lg:p-8 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2l font-semibold text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Add New Bank Account', __('Add New Bank Account')) }}</h1>
        <a href="{{ route('banking.accounts.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 p-4 rounded">
            <i class="fas fa-arrow-right ml-1"></i> {{ \App\Helpers\TranslationHelper::transFromDatabase('Back to List', __('Back to List')) }}
        </a>
    </div>

    <div class="bg-white shadow-md rounded-lg overflow-hidden p-6">
        <form action="{{ route('banking.accounts.store') }}" method="POST">
            @csrf
            
            <div class="mb-4">
                <label for="bank_id" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Bank', __('Bank')) }} <span class="text-red-600">*</span></label>
                <select name="bank_id" id="bank_id" required
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline @error('bank_id') border-red-500 @enderror">
                    <option value="">-- {{ \App\Helpers\TranslationHelper::transFromDatabase('Select Bank', __('Select Bank')) }} --</option>
                    @foreach($banks as $bank)
                    <option value="{{ $bank->id }}" data-account-id="{{ $bank->chart_of_account_id }}" data-account-name="{{ $bank->chartOfAccount->name ?? '' }}" data-account-code="{{ $bank->chartOfAccount->code ?? '' }}" {{ old('bank_id', request('bank_id')) == $bank->id ? 'selected' : '' }}>{{ $bank->name }}</option>
                    @endforeach
                </select>
                @error('bank_id')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="branch_id" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Branch', __('Branch')) }}</label>
                <select name="branch_id" id="branch_id"
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline @error('branch_id') border-red-500 @enderror">
                    <option value="">-- {{ \App\Helpers\TranslationHelper::transFromDatabase('Select Branch', __('Select Branch')) }} --</option>
                    @foreach($branches as $branch)
                    <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
                @error('branch_id')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="chart_of_account_display" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Bank Account in Chart of Accounts', __('Bank Account in Chart of Accounts')) }} <span class="text-red-600">*</span></label>
                <input type="text" id="chart_of_account_display" readonly
                    placeholder="{{ \App\Helpers\TranslationHelper::transFromDatabase('Account will be filled automatically when bank is selected', __('Account will be filled automatically when bank is selected')) }}"
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight bg-gray-100 cursor-not-allowed">
                <input type="hidden" name="chart_of_account_id" id="chart_of_account_id" required>
                @error('chart_of_account_id')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="account_number" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Account Number', __('Account Number')) }} <span class="text-red-600">*</span></label>
                <input type="text" name="account_number" id="account_number" value="{{ old('account_number') }}" required
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline @error('account_number') border-red-500 @enderror">
                @error('account_number')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="account_name" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Account Name', __('Account Name')) }} <span class="text-red-600">*</span></label>
                <input type="text" name="account_name" id="account_name" value="{{ old('account_name') }}" required
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline @error('account_name') border-red-500 @enderror">
                @error('account_name')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="iban" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('IBAN Number', __('IBAN Number')) }}</label>
                <input type="text" name="iban" id="iban" value="{{ old('iban') }}"
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline @error('iban') border-red-500 @enderror">
                @error('iban')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="currency" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Currency', __('Currency')) }} <span class="text-red-600">*</span></label>
                <select name="currency" id="currency" required
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline @error('currency') border-red-500 @enderror">
                    <option value="SAR" {{ old('currency') == 'SAR' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('Saudi Riyal (SAR)', __('Saudi Riyal (SAR)')) }}</option>
                    <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('US Dollar (USD)', __('US Dollar (USD)')) }}</option>
                    <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('Euro (EUR)', __('Euro (EUR)')) }}</option>
                    <option value="GBP" {{ old('currency') == 'GBP' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('British Pound (GBP)', __('British Pound (GBP)')) }}</option>
                    <option value="AED" {{ old('currency') == 'AED' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('UAE Dirham (AED)', __('UAE Dirham (AED)')) }}</option>
                </select>
                @error('currency')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="opening_balance" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Opening Balance', __('Opening Balance')) }}</label>
                <input type="number" name="opening_balance" id="opening_balance" value="{{ old('opening_balance', 0) }}" step="0.01"
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline @error('opening_balance') border-red-500 @enderror">
                @error('opening_balance')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="opening_date" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Opening Date', __('Opening Date')) }} <span class="text-red-600">*</span></label>
                <input type="date" name="opening_date" id="opening_date" value="{{ old('opening_date', date('Y-m-d')) }}" required
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline @error('opening_date') border-red-500 @enderror">
                @error('opening_date')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="notes" class="block text-black text-sm font-bold mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Notes', __('Notes')) }}</label>
                <textarea name="notes" id="notes" rows="3"
                    class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline @error('notes') border-red-500 @enderror">{{ old('notes') }}</textarea>
                @error('notes')
                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <div class="flex items-center">
                    <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', '1') == '1' ? 'checked' : '' }}
                        class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                    <label for="is_active" class="mr-2 text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Active', __('Active')) }}</label>
                </div>
            </div>

            <div class="flex items-center justify-between">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 p-4 rounded focus:outline-none focus:shadow-outline">
                    {{ \App\Helpers\TranslationHelper::transFromDatabase('Save Account', __('Save Account')) }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('bank_id').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const accountId = selectedOption.getAttribute('data-account-id');
    const accountName = selectedOption.getAttribute('data-account-name');
    const accountCode = selectedOption.getAttribute('data-account-code');
    
    if (accountId && accountName && accountCode) {
        document.getElementById('chart_of_account_display').value = accountName + ' (' + accountCode + ')';
        document.getElementById('chart_of_account_id').value = accountId;
    } else {
        document.getElementById('chart_of_account_display').value = '';
        document.getElementById('chart_of_account_id').value = '';
    }
});

if (document.getElementById('bank_id').value) {
    document.getElementById('bank_id').dispatchEvent(new Event('change'));
}
</script>
@endsection