@extends('layouts.app')

@section('title', 'إضافة سجل متبقي حساب')

@push('styles')
<style>
    .page-header-compact {
        background: linear-gradient(135deg, #009688 0%, #4DB6AC 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: #009688;
    }
    .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 { font-size: 0.85rem; padding: 0.4rem 0.75rem; }
    .form-control-sm:focus {
        border-color: #009688;
        box-shadow: 0 0 0 0.15rem rgba(0, 150, 136, 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, #009688, #4DB6AC);
        color: white;
        border: none;
    }

    .btn-compact { padding: 0.5rem 1.25rem; font-size: 0.85rem; }

    .tips-card-compact {
        background: linear-gradient(135deg, #E0F2F1, #B2DFDB);
        border: 1px solid #80CBC4;
        border-radius: 0.75rem;
        padding: 1rem;
    }
    .tips-card-compact h6 { font-size: 0.85rem; color: #00695C; margin-bottom: 0.5rem; }
    .tips-card-compact ul { margin: 0; padding-right: 1rem; font-size: 0.8rem; color: #00796B; }
    .tips-card-compact li { margin-bottom: 0.25rem; }

    .amount-helper {
        background: #E0F2F1;
        border: 1px solid #80CBC4;
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        margin-top: 0.75rem;
    }
    .amount-helper .total-line {
        font-size: 1rem;
        font-weight: 700;
        color: #00695C;
    }
</style>
@endpush

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

    <form action="{{ route('account-balances.store') }}" method="POST" id="mainForm">
        @csrf
        <div class="row g-3">
            <!-- Main Column -->
            <div class="col-lg-9">
                <!-- Basic Info -->
                <div class="card form-card-compact">
                    <div class="card-header">
                        <h6><i class="bx bx-user"></i> معلومات الاسم</h6>
                    </div>
                    <div class="card-body">
                        <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-user"></i></span>
                                <input type="text" name="name" class="form-control form-control-sm @error('name') is-invalid @enderror"
                                    value="{{ old('name') }}" required placeholder="اسم الشخص أو المنشأة">
                            </div>
                            @error('name')
                                <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Remaining Amounts Card -->
                <div class="card form-card-compact">
                    <div class="card-header">
                        <h6><i class="bx bx-money"></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-category-alt"></i></span>
                                    <select name="balance_type" class="form-select form-select-sm @error('balance_type') is-invalid @enderror" required>
                                        <option value="">-- اختر نوع المتبقي --</option>
                                        @foreach($types as $key => $label)
                                            <option value="{{ $key }}" {{ old('balance_type') == $key ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('balance_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-buildings"></i></span>
                                    <select name="receiving_entity" class="form-select form-select-sm @error('receiving_entity') is-invalid @enderror">
                                        <option value="">-- اختر جهة الاستلام --</option>
                                        @foreach($receivingEntities as $key => $label)
                                            <option value="{{ $key }}" {{ old('receiving_entity') == $key ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('receiving_entity')
                                    <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" min="0" name="remaining_amount"
                                        class="form-control form-control-sm @error('remaining_amount') is-invalid @enderror"
                                        value="{{ old('remaining_amount', 0) }}" required placeholder="0.00">
                                    <span class="input-group-text" style="font-size:0.75rem; color:#566a7f;">ر.س</span>
                                </div>
                                @error('remaining_amount')
                                    <div class="text-danger" style="font-size: 0.75rem;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Notes -->
                        <div class="mt-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>

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

            <!-- Sidebar -->
            <div class="col-lg-3">
                <div class="tips-card-compact">
                    <h6><i class="bx bx-info-circle me-1"></i> تعليمات</h6>
                    <ul>
                        <li>أدخل اسم الشخص أو المنشأة المعنية.</li>
                        <li>اختر نوع المتبقي من القائمة المنسدلة.</li>
                        <li>أدخل قيمة المبلغ المتبقي.</li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection