@extends('layouts.app')

@section('title', 'إضافة حوالة جديدة')

@push('styles')
<style>
    .page-header-compact {
        background: linear-gradient(135deg, #3F51B5 0%, #7986CB 100%);
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1rem;
        color: white;
    }
    .page-header-compact h5 { margin: 0; font-size: 1.1rem; font-weight: 600; }
    .page-header-compact p { margin: 0; font-size: 0.8rem; opacity: 0.9; }
    
    .form-card-compact {
        background: white;
        border-radius: 0.75rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        border: none;
        margin-bottom: 0.75rem;
    }
    .form-card-compact .card-header {
        background: transparent;
        border-bottom: 1px solid #f1f1f1;
        padding: 0.75rem 1rem;
    }
    .form-card-compact .card-header h6 {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #3F51B5;
    }
    .form-card-compact .card-body { padding: 1rem; }
    
    .form-label-sm { font-size: 0.8rem; font-weight: 600; color: #566a7f; margin-bottom: 0.25rem; }
    .form-control-sm, .form-select-sm { font-size: 0.85rem; padding: 0.4rem 0.75rem; }
    .form-control-sm:focus, .form-select-sm:focus {
        border-color: #3F51B5;
        box-shadow: 0 0 0 0.15rem rgba(63, 81, 181, 0.15);
    }
    
    .g-compact { --bs-gutter-y: 0.5rem; --bs-gutter-x: 0.75rem; }
    
    .input-group-text-sm {
        padding: 0.4rem 0.65rem;
        font-size: 0.85rem;
        background: linear-gradient(135deg, #3F51B5, #7986CB);
        color: white;
        border: none;
    }
    
    .btn-compact { padding: 0.5rem 1.25rem; font-size: 0.85rem; }
    
    .tips-card-compact {
        background: linear-gradient(135deg, #E8EAF6, #C5CAE9);
        border: 1px solid #9FA8DA;
        border-radius: 0.75rem;
        padding: 1rem;
    }
    .tips-card-compact h6 { font-size: 0.85rem; color: #303F9F; margin-bottom: 0.5rem; }
    .tips-card-compact ul { margin: 0; padding-right: 1rem; font-size: 0.8rem; color: #3949AB; }
    .tips-card-compact li { margin-bottom: 0.25rem; }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Compact Header -->
    <div class="page-header-compact">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5><i class="bx bx-transfer"></i> إضافة حوالة جديدة</h5>
                <p>إضافة سجل حوالة مالية جديدة</p>
            </div>
            <a href="{{ route('transfers.index') }}" class="btn btn-light btn-sm">
                <i class="bx bx-arrow-back"></i> العودة
            </a>
        </div>
    </div>

    <form action="{{ route('transfers.store') }}" method="POST">
        @csrf
        <div class="row g-3">
            <!-- Main Form Column -->
            <div class="col-lg-9">
                <!-- Basic Info Card -->
                <div class="card form-card-compact">
                    <div class="card-header">
                        <h6><i class="bx bx-info-circle"></i> معلومات الحوالة</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-compact">
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">التاريخ <span class="text-danger">*</span></label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-calendar"></i></span>
                                    <input type="date" name="transfer_date" class="form-control form-control-sm @error('transfer_date') is-invalid @enderror" value="{{ old('transfer_date', date('Y-m-d')) }}" required>
                                </div>
                                @error('transfer_date')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">اسم الموظف <span class="text-danger">*</span></label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-user"></i></span>
                                    <input type="text" name="employee_name" class="form-control form-control-sm @error('employee_name') is-invalid @enderror" value="{{ old('employee_name') }}" required>
                                </div>
                                @error('employee_name')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 mb-2">
                                <label class="form-label-sm">بيان الحوالة <span class="text-danger">*</span></label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-text"></i></span>
                                    <input type="text" name="description" class="form-control form-control-sm @error('description') is-invalid @enderror" value="{{ old('description') }}" required>
                                </div>
                                @error('description')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Transfer Details Card -->
                <div class="card form-card-compact">
                    <div class="card-header">
                        <h6><i class="bx bx-send"></i> تفاصيل الحوالة</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-compact">
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">نوع الحوالة</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-category"></i></span>
                                    <select name="transfer_type" class="form-select form-select-sm @error('transfer_type') is-invalid @enderror">
                                        <option value="">-- اختر النوع --</option>
                                        @foreach($types as $key => $type)
                                            <option value="{{ $key }}" {{ old('transfer_type') == $key ? 'selected' : '' }}>{{ $type }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('transfer_type')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">جهة الحوالة</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-building-house"></i></span>
                                    <select name="transfer_destination" class="form-select form-select-sm @error('transfer_destination') is-invalid @enderror">
                                        <option value="">-- اختر الجهة --</option>
                                        @foreach($destinations as $key => $dest)
                                            <option value="{{ $key }}" {{ old('transfer_destination') == $key ? 'selected' : '' }}>{{ $dest }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('transfer_destination')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">المدفوع <span class="text-danger">*</span></label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-dollar"></i></span>
                                    <input type="number" step="0.01" name="paid_amount" class="form-control form-control-sm @error('paid_amount') is-invalid @enderror" value="{{ old('paid_amount', 0) }}" required>
                                </div>
                                @error('paid_amount')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-2">
                                <label class="form-label-sm">المتبقي</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text input-group-text-sm"><i class="bx bx-wallet-alt"></i></span>
                                    <input type="number" step="0.01" name="remaining_amount" class="form-control form-control-sm @error('remaining_amount') is-invalid @enderror" value="{{ old('remaining_amount', 0) }}">
                                </div>
                                @error('remaining_amount')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 mb-2">
                                <label class="form-label-sm">ملاحظات</label>
                                <textarea name="notes" class="form-control form-control-sm @error('notes') is-invalid @enderror" rows="2" placeholder="ملاحظات إضافية...">{{ old('notes') }}</textarea>
                                @error('notes')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="d-flex gap-2 justify-content-end mt-2">
                    <a href="{{ route('transfers.index') }}" class="btn btn-outline-secondary btn-compact">
                        <i class="bx bx-x"></i> إلغاء
                    </a>
                    <button type="submit" class="btn btn-compact" style="background: linear-gradient(135deg, #3F51B5, #7986CB); color: white;">
                        <i class="bx bx-save"></i> حفظ
                    </button>
                </div>
            </div>

            <!-- Tips Sidebar -->
            <div class="col-lg-3">
                <div class="tips-card-compact">
                    <h6><i class="bx bx-bulb"></i> نصائح سريعة</h6>
                    <ul>
                        <li>التاريخ والمبلغ والبيان حقول إلزامية</li>
                        <li>أدخل المبلغ بدقة</li>
                        <li>اختر نوع وجهة الحوالة للتصنيف</li>
                        <li>أضف ملاحظات للتوضيح</li>
                    </ul>
                </div>

                <div class="tips-card-compact mt-3" style="background: linear-gradient(135deg, #FFF8E1, #FFECB3); border-color: #FFD54F;">
                    <h6 style="color: #F57F17;"><i class="bx bx-info-circle"></i> أنواع الحوالات</h6>
                    <ul style="color: #F57C00;">
                        <li>داخلية: بين الحسابات المحلية</li>
                        <li>خارجية: للخارج</li>
                        <li>بنكية: عبر البنك</li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection