@extends('layouts.app')

@section('title', \App\Helpers\TranslationHelper::transFromDatabase('Create New Bank Reconciliation', 'إنشاء تسوية بنكية جديدة'))

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-4xl mx-auto">
        <div class="mb-8 flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-black mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Create New Bank Reconciliation', __('إنشاء تسوية بنكية جديدة')) }}</h1>
                <p class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Enter reconciliation details to start matching operations', __('أدخل تفاصيل التسوية لبدء عمليات المطابقة')) }}</p>
            </div>
            <a href="{{ route('banking.reconciliations.index') }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg text-black font-semibold hover:bg-gray-50 transition-all duration-200 shadow-sm">
                <i class="fas fa-arrow-right ml-2"></i>
                <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Back to List', __('العودة للقائمة')) }}</span>
            </a>
        </div>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            <div class="bg-gradient-to-r from-gray-800 to-gray-900 px-6 py-4">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <i class="fas fa-sync-alt ml-2"></i>
                    {{ \App\Helpers\TranslationHelper::transFromDatabase('Bank Reconciliation Data', __('بيانات التسوية البنكية')) }}
                </h2>
            </div>

            <form action="{{ route('banking.reconciliations.store') }}" method="POST" class="p-6">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="bank_account_id" class="block text-sm font-semibold text-black mb-2">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Bank Account', __('الحساب البنكي')) }} <span class="text-red-500">*</span>
                        </label>
                        <select name="bank_account_id" id="bank_account_id" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('bank_account_id') border-red-500 @enderror" required>
                            <option value="">{{ \App\Helpers\TranslationHelper::transFromDatabase('Select Bank Account', __('اختر الحساب البنكي')) }}</option>
                            @foreach($bankAccounts ?? [] as $account)
                                <option value="{{ $account->id }}" {{ old('bank_account_id') == $account->id ? 'selected' : '' }}>
                                    {{ $account->bank->name }} - {{ $account->account_name }} - {{ $account->account_number }} - {{ $account->currency }}
                                </option>
                            @endforeach
                        </select>
                        @error('bank_account_id')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="reconciliation_number" class="block text-sm font-semibold text-black mb-2">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Reconciliation Number', __('رقم التسوية')) }} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="reconciliation_number" id="reconciliation_number" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('reconciliation_number') border-red-500 @enderror" value="{{ old('reconciliation_number', 'REC-' . date('Ymd') . '-' . rand(1000, 9999)) }}" required>
                        @error('reconciliation_number')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="start_date" class="block text-sm font-semibold text-black mb-2">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Start Date', __('تاريخ البدء')) }} <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="start_date" id="start_date" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('start_date') border-red-500 @enderror" value="{{ old('start_date', date('Y-m-01')) }}" required>
                        @error('start_date')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="end_date" class="block text-sm font-semibold text-black mb-2">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('End Date', __('تاريخ الانتهاء')) }} <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="end_date" id="end_date" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('end_date') border-red-500 @enderror" value="{{ old('end_date', date('Y-m-t')) }}" required>
                        @error('end_date')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="bank_balance" class="block text-sm font-semibold text-black mb-2">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Bank Balance', __('الرصيد البنكي')) }} <span class="text-red-500">*</span>
                        </label>
                        <input type="number" step="0.01" name="bank_balance" id="bank_balance" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('bank_balance') border-red-500 @enderror" value="{{ old('bank_balance') }}" required>
                        <p class="mt-1 text-xs text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Enter the final balance from the bank statement', __('أدخل الرصيد النهائي من كشف الحساب البنكي')) }}</p>
                        @error('bank_balance')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="statement_date" class="block text-sm font-semibold text-black mb-2">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Statement Date', __('تاريخ كشف الحساب')) }} <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="statement_date" id="statement_date" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('statement_date') border-red-500 @enderror" value="{{ old('statement_date', date('Y-m-d')) }}" required>
                        @error('statement_date')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="mb-8">
                    <label for="notes" class="block text-sm font-semibold text-black mb-2">
                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Notes', __('ملاحظات')) }}
                    </label>
                    <textarea name="notes" id="notes" rows="3" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 @error('notes') border-red-500 @enderror">{{ old('notes') }}</textarea>
                    @error('notes')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center justify-end space-x-3 space-x-reverse border-t border-gray-100 pt-6">
                    <a href="{{ route('banking.reconciliations.index') }}" class="px-6 py-2 bg-gray-100 text-black font-semibold rounded-lg hover:bg-gray-200 transition-all duration-200">
                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Cancel', __('إلغاء')) }}
                    </a>
                    <button type="submit" class="px-6 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-md hover:shadow-lg">
                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Create Reconciliation', __('إنشاء التسوية')) }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // التحقق من أن تاريخ الانتهاء بعد تاريخ البدء
        const startDateInput = document.getElementById('start_date');
        const endDateInput = document.getElementById('end_date');
        
        function validateDates() {
            if (startDateInput.value && endDateInput.value) {
                if (new Date(endDateInput.value) < new Date(startDateInput.value)) {
                    endDateInput.setCustomValidity('{{ \App\Helpers\TranslationHelper::transFromDatabase("End date must be after start date", "تاريخ الانتهاء يجب أن يكون بعد تاريخ البدء") }}');
                } else {
                    endDateInput.setCustomValidity('');
                }
            }
        }
        
        startDateInput.addEventListener('change', validateDates);
        endDateInput.addEventListener('change', validateDates);
    });
</script>
@endsection