@extends('layouts.app')
@section('title', 'اشتراك')
@section('page_title', 'الاشتراك ' . $subscription->code)
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('subscriptions.index') }}">الاشتراكات</a></li>
    <li class="breadcrumb-item active">{{ $subscription->code }}</li>
@endsection

@section('page_actions')
    @can('subscriptions.edit')
        <a href="{{ route('subscriptions.edit', $subscription) }}" class="btn btn-light"><i class="fa-solid fa-pen ms-2"></i>تعديل</a>
    @endcan
@endsection

@section('content')
<div class="row g-3">
    <div class="col-xl-5">
        <div class="card mb-3">
            <div class="card-body">
                <div class="profile-head mb-3">
                    <div class="profile-avatar bg-{{ $subscription->status_color }}"><i class="fa-solid fa-satellite-dish"></i></div>
                    <div>
                        <h2 class="h5 fw-bold mb-1">{{ $subscription->code }}</h2>
                        <div class="text-muted small">{{ $subscription->product?->name ?? 'اشتراك منصة التتبع' }}</div>
                        <div class="mt-2">
                            {!! badge($subscription->status_label, $subscription->status_color) !!}
                            @if ($subscription->auto_renew) {!! badge('تجديد تلقائي', 'info') !!} @endif
                        </div>
                    </div>
                </div>

                @php $days = $subscription->days_remaining; @endphp
                <div class="alert alert-{{ $days < 0 ? 'danger' : ($days <= 30 ? 'warning' : 'success') }} small mb-3">
                    <i class="fa-solid fa-clock ms-1"></i>
                    @if ($days < 0)
                        انتهى الاشتراك منذ {{ abs($days) }} يوماً
                    @else
                        متبقي {{ $days }} يوماً على انتهاء الاشتراك
                    @endif
                </div>

                <ul class="detail-list">
                    <li><span class="dl-label">العميل</span>
                        <span class="dl-value"><a href="{{ route('customers.show', $subscription->customer) }}">{{ $subscription->customer?->display_name ?? '—' }}</a></span>
                    </li>
                    <li><span class="dl-label">المركبة</span>
                        <span class="dl-value">
                            @if ($subscription->vehicle)
                                <a href="{{ route('vehicles.show', $subscription->vehicle) }}">{{ $subscription->vehicle->plate_number }}</a>
                            @else — @endif
                        </span>
                    </li>
                    <li><span class="dl-label">الجهاز</span>
                        <span class="dl-value">
                            @if ($subscription->deviceUnit)
                                <a href="{{ route('devices.show', $subscription->deviceUnit) }}" class="font-monospace">{{ $subscription->deviceUnit->imei }}</a>
                            @else — @endif
                        </span>
                    </li>
                    <li><span class="dl-label">تاريخ البداية</span><span class="dl-value">{{ arabicDate($subscription->start_date) }}</span></li>
                    <li><span class="dl-label">تاريخ الانتهاء</span><span class="dl-value fw-bold">{{ arabicDate($subscription->end_date) }}</span></li>
                    <li><span class="dl-label">القيمة</span><span class="dl-value">{{ currency($subscription->amount) }}</span></li>
                    <li><span class="dl-label">أنشأه</span><span class="dl-value">{{ $subscription->creator?->name ?? '—' }}</span></li>
                </ul>

                <div class="form-section-title mt-4"><i class="fa-solid fa-key"></i>بيانات منصة التتبع</div>
                <ul class="detail-list">
                    <li><span class="dl-label">الرابط</span>
                        <span class="dl-value">
                            @if ($subscription->platform_url)
                                <a href="{{ $subscription->platform_url }}" target="_blank" dir="ltr">{{ $subscription->platform_url }}</a>
                            @else — @endif
                        </span>
                    </li>
                    <li><span class="dl-label">اسم المستخدم</span><span class="dl-value font-monospace">{{ $subscription->platform_username ?: '—' }}</span></li>
                    <li><span class="dl-label">كلمة المرور</span>
                        <span class="dl-value">
                            <span class="font-monospace" id="pwdMask">••••••••</span>
                            <span class="font-monospace d-none" id="pwdText">{{ $subscription->platform_password ?: '—' }}</span>
                            <button class="btn btn-sm btn-link p-0 me-2" type="button" onclick="$('#pwdMask,#pwdText').toggleClass('d-none')">
                                <i class="fa-solid fa-eye"></i>
                            </button>
                        </span>
                    </li>
                </ul>

                @if ($subscription->notes)
                    <div class="alert alert-light border small mt-3 mb-0" style="white-space: pre-line">{{ $subscription->notes }}</div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-xl-7">
        @can('subscriptions.edit')
            <div class="card mb-3" id="renew">
                <div class="card-header"><span><i class="fa-solid fa-rotate text-success ms-2"></i>تجديد الاشتراك</span></div>
                <div class="card-body">
                    <form action="{{ route('subscriptions.renew', $subscription) }}" method="POST" class="row g-3">
                        @csrf
                        <div class="col-md-3">
                            <label class="form-label">مدة التجديد (شهر) <span class="req">*</span></label>
                            <input type="number" name="months" value="12" min="1" max="60" class="form-control" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">قيمة التجديد <span class="req">*</span></label>
                            <input type="number" step="0.01" min="0" name="amount" value="{{ (float) $subscription->amount }}" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">الباقة</label>
                            <select name="product_id" class="form-select">
                                <option value="">— بدون تغيير —</option>
                                @foreach ($plans as $p)
                                    <option value="{{ $p->id }}" @selected($subscription->product_id === $p->id)>{{ $p->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-success w-100"><i class="fa-solid fa-rotate ms-1"></i>تجديد</button>
                        </div>
                        <div class="col-12">
                            @can('invoices.create')
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="create_invoice" value="1" id="createInvoice" checked>
                                    <label class="form-check-label" for="createInvoice">إصدار فاتورة تلقائياً بقيمة التجديد</label>
                                </div>
                            @endcan
                            <input type="text" name="notes" class="form-control mt-2" placeholder="ملاحظات التجديد (اختياري)">
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header"><span><i class="fa-solid fa-shuffle text-primary ms-2"></i>تغيير الحالة</span></div>
                <div class="card-body">
                    <form action="{{ route('subscriptions.status', $subscription) }}" method="POST" class="d-flex gap-2">
                        @csrf
                        <select name="status" class="form-select">
                            @foreach (\App\Models\Subscription::STATUSES as $k => $v)
                                <option value="{{ $k }}" @selected($subscription->status === $k)>{{ $v }}</option>
                            @endforeach
                        </select>
                        <button class="btn btn-primary"><i class="fa-solid fa-check"></i></button>
                    </form>
                </div>
            </div>
        @endcan

        <div class="card">
            <div class="card-header"><span><i class="fa-solid fa-clock-rotate-left text-warning ms-2"></i>سجل التجديدات ({{ $subscription->renewals->count() }})</span></div>
            <div class="card-body p-0 table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                    <tr><th>التاريخ</th><th>المدة</th><th>من</th><th>إلى</th><th>القيمة</th><th>الفاتورة</th></tr>
                    </thead>
                    <tbody>
                    @forelse ($subscription->renewals->sortByDesc('id') as $renewal)
                        <tr>
                            <td>{{ arabicDate($renewal->date) }}</td>
                            <td>{{ $renewal->months }} شهر</td>
                            <td class="small">{{ arabicDate($renewal->old_end_date) }}</td>
                            <td class="small fw-bold">{{ arabicDate($renewal->new_end_date) }}</td>
                            <td>{{ currency($renewal->amount) }}</td>
                            <td>
                                @if ($renewal->invoice)
                                    <a href="{{ route('invoices.show', $renewal->invoice) }}" class="text-decoration-none">{{ $renewal->invoice->code }}</a>
                                @else — @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="text-center text-muted py-4">لا توجد تجديدات سابقة</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection