@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; }

    .detail-card {
        background: white;
        border-radius: 0.75rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        border: none;
        margin-bottom: 1rem;
        overflow: hidden;
    }
    .detail-card .card-header {
        background: transparent;
        border-bottom: 1px solid #f1f1f1;
        padding: 0.75rem 1.25rem;
    }
    .detail-card .card-header h6 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: #009688;
    }
    .detail-card .card-body { padding: 1.25rem; }

    .info-row {
        display: flex;
        border-bottom: 1px solid #f5f5f5;
        padding: 0.6rem 0;
        font-size: 0.875rem;
    }
    .info-row:last-child { border-bottom: none; }
    .info-label {
        width: 220px;
        font-weight: 600;
        color: #566a7f;
        flex-shrink: 0;
    }
    .info-value { color: #333; }
    .info-value.amount { font-weight: 700; font-size: 1.05rem; color: #009688; }
    .info-value.total-amount { font-weight: 700; font-size: 1.2rem; color: #00695C; }
    .info-value.zero { color: #b0bec5; }

    .activity-timeline {
        position: relative;
        padding-right: 20px;
    }
    .activity-timeline::before {
        content: '';
        position: absolute;
        right: 7px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, #009688 0%, #e9ecef 100%);
    }
    .activity-item {
        position: relative;
        padding-right: 25px;
        padding-bottom: 1.25rem;
    }
    .activity-item::before {
        content: '';
        position: absolute;
        right: 0;
        top: 5px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--bs-primary);
        border: 3px solid #fff;
        box-shadow: 0 0 0 2px var(--bs-primary);
    }
    .activity-item.create::before { background: var(--bs-success); box-shadow: 0 0 0 2px var(--bs-success); }
    .activity-item.update::before { background: var(--bs-primary); box-shadow: 0 0 0 2px var(--bs-primary); }
    .activity-item.delete::before { background: var(--bs-danger); box-shadow: 0 0 0 2px var(--bs-danger); }
    .activity-content {
        background: #fff;
        border-radius: 0.5rem;
        padding: 0.875rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        border: 1px solid #e9ecef;
    }
    .activity-content:hover { border-color: #009688; }


</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="page-header-compact">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5><i class="bx bx-wallet-alt"></i> تفاصيل سجل متبقي الحساب</h5>
                <p>{{ $accountBalance->name }}</p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::EDIT_ACCOUNT_BALANCES))
                <a href="{{ route('account-balances.edit', $accountBalance) }}" class="btn btn-warning btn-sm">
                    <i class="bx bx-edit"></i> تعديل
                </a>
                @endif
                <a href="{{ route('account-balances.index') }}" class="btn btn-light btn-sm">
                    <i class="bx bx-arrow-back"></i> العودة
                </a>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-lg-8">
            <!-- Basic Info -->
            <div class="card detail-card">
                <div class="card-header">
                    <h6><i class="bx bx-user me-2"></i>معلومات السجل</h6>
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <div class="info-label">رقم السجل</div>
                        <div class="info-value">#{{ $accountBalance->id }}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">الاسم</div>
                        <div class="info-value"><strong>{{ $accountBalance->name }}</strong></div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">تاريخ الإضافة</div>
                        <div class="info-value">{{ $accountBalance->created_at->format('Y-m-d H:i') }}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">آخر تعديل</div>
                        <div class="info-value">{{ $accountBalance->updated_at->format('Y-m-d H:i') }}</div>
                    </div>
                    @if($accountBalance->notes)
                    <div class="info-row">
                        <div class="info-label">الملاحظات</div>
                        <div class="info-value">{{ $accountBalance->notes }}</div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Amounts Detail -->
            <div class="card detail-card">
                <div class="card-header">
                    <h6><i class="bx bx-money me-2"></i>تفاصيل المبالغ المتبقية</h6>
                </div>
                <div class="card-body">
                    <div class="info-row">
                        <div class="info-label">نوع المتبقي</div>
                        <div class="info-value">
                            <span class="badge" style="background:#e0f2f1; color:#00695C; font-size:0.85rem; padding:0.35em 0.75em;">{{ $accountBalance->balance_type }}</span>
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">المبلغ المتبقي</div>
                        <div class="info-value amount">{{ number_format($accountBalance->remaining_amount, 2) }} ر.س</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions Sidebar -->
        <div class="col-lg-4">
            <div class="card detail-card">
                <div class="card-header">
                    <h6><i class="bx bx-cog me-2"></i>الإجراءات</h6>
                </div>
                <div class="card-body d-grid gap-2">
                    @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::EDIT_ACCOUNT_BALANCES))
                    <a href="{{ route('account-balances.edit', $accountBalance) }}" class="btn text-white" style="background:#009688;">
                        <i class="bx bx-edit me-2"></i>تعديل السجل
                    </a>
                    @endif
                    <a href="{{ route('account-balances.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-list-ul me-2"></i>قائمة السجلات
                    </a>
                    @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::CREATE_ACCOUNT_BALANCES))
                    <a href="{{ route('account-balances.create') }}" class="btn btn-outline-primary">
                        <i class="bx bx-plus me-2"></i>إضافة سجل جديد
                    </a>
                    @endif
                </div>
            </div>
        </div>

        <!-- سجل النشاطات -->
        <div class="col-lg-4">
            @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::VIEW_ACTIVITIES))
            <div class="card detail-card sticky-top" style="top: 1rem;">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6><i class="bx bx-history me-2"></i>سجل النشاطات</h6>
                    @if($activities->count() > 0)
                    <a href="{{ route('activities.index', ['model_type' => 'account_balance', 'model_id' => $accountBalance->id]) }}" class="btn btn-sm btn-label-primary">
                        <i class="bx bx-link-external"></i> الكل
                    </a>
                    @endif
                </div>
                <div class="card-body" style="max-height: 500px; overflow-y: auto;">
                    @if($activities->count() > 0)
                        <div class="activity-timeline">
                            @foreach($activities as $activity)
                                <div class="activity-item {{ $activity->action }}">
                                    <div class="activity-content">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <span class="badge bg-{{ $activity->action_color }}">
                                                <i class="bx {{ $activity->action_icon }}"></i>
                                                {{ $activity->action_name }}
                                            </span>
                                            <small class="text-muted">{{ $activity->created_at->diffForHumans() }}</small>
                                        </div>
                                        <p class="mb-1 small">{{ $activity->description }}</p>
                                        <div class="d-flex align-items-center small text-muted">
                                            <i class="bx bx-user me-1"></i>
                                            @if($activity->performer)
                                                {{ $activity->performer->name }}
                                            @else
                                                {{ $activity->performed_by ?? 'النظام' }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5 text-muted">
                            <i class="bx bx-history" style="font-size: 3rem; opacity: 0.5;"></i>
                            <p class="mb-0 mt-2">لا يوجد سجل نشاطات</p>
                        </div>
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection