@extends('layouts.app')

@section('title', $service->name)

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center gap-3 w-100">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1">
                        <li class="breadcrumb-item"><a href="{{ route('operations') }}">{{ __('operations') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $service->name }}</li>
                    </ol>
                </nav>
                <h4 class="fw-bold">{{ $service->name }}</h4>
            </div>
            <a href="{{ route('operations') }}" class="btn btn-outline-secondary app-back-end">
                <i class="bi {{ app()->getLocale() == 'ar' ? 'bi-arrow-right' : 'bi-arrow-left' }}"></i> {{ __('common.back') }}
            </a>
        </div>
    </div>

    <form method="GET" action="{{ route('operations.show', $service->id) }}" class="mb-3">
        <div class="input-group">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input
                name="q"
                value="{{ $search ?? '' }}"
                class="form-control"
                placeholder="بحث: اسم الزبون / رقم الهاتف / رقم الوصل"
                autocomplete="off"
            >
            <button class="btn btn-primary" type="submit">{{ __('common.search') }}</button>
            @if(!empty($search))
                <a class="btn btn-outline-secondary" href="{{ route('operations.show', $service->id) }}">مسح</a>
            @endif
        </div>
    </form>

    <div class="row g-3">
        @forelse($subscriptions as $subscription)
            @php
                // Calculate progress based on tasks
                $totalTasks = 0;
                $completedTasks = 0;
                
                if ($subscription->order && $subscription->order->items) {
                    foreach($subscription->order->items as $item) {
                        $totalTasks += $item->tasks->count();
                        $completedTasks += $item->tasks->where('status', 'done')->count();
                    }
                }
                
                $percentage = $totalTasks > 0 ? round(($completedTasks / $totalTasks) * 100) : 0;
            @endphp
            <div class="col-md-6 col-lg-4 col-xl-3">
                <a href="{{ route('operations.kanban', ['serviceId' => $service->id, 'subscriptionId' => $subscription->id]) }}" class="text-decoration-none">
                    <div class="card h-100 border-0 shadow-sm hover-shadow transition-all">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="card-title fw-bold text-dark mb-1">{{ $subscription->customer_name }}</h5>
                                    <div class="text-muted small">
                                        <i class="bi bi-telephone me-1"></i> {{ $subscription->phone ?? 'N/A' }}
                                    </div>
                                    <div class="text-muted small">
                                        <i class="bi bi-person-badge me-1"></i> {{ __('operations.work_employee') }}: {{ $subscription->workEmployee?->full_name ?? '—' }}
                                    </div>
                                </div>
                                <span class="badge bg-light text-dark border">#{{ $subscription->invoice_number }}</span>
                            </div>
                            
                            <div class="d-flex align-items-center justify-content-between mt-3">
                                <div class="d-flex align-items-center">
                                    <div class="progress-circle me-2" data-percentage="{{ $percentage }}">
                                        <svg viewBox="0 0 36 36" class="circular-chart">
                                            <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                                            <path class="circle" stroke-dasharray="{{ $percentage }}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                                        </svg>
                                        <span class="percentage small fw-bold">{{ $percentage }}%</span>
                                    </div>
                                    <div class="small text-muted">
                                        {{ $completedTasks }}/{{ $totalTasks }} Tasks
                                    </div>
                                </div>
                                <div class="text-primary small fw-bold">
                                    View Board <i class="bi bi-arrow-right ms-1"></i>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-light border-0 py-2">
                            <div class="d-flex justify-content-between align-items-center small">
                                @if($service->type === 'monthly_subscription_open' || $service->type === 'monthly_subscription_limited' || $service->type === 'one_time_service')
                                    <div>
                                        @if($subscription->is_expired)
                                            <span class="text-danger fw-bold">منتهي</span>
                                        @else
                                            <span class="text-success fw-bold">نشط</span>
                                        @endif
                                    </div>
                                    <div>
                                        @if($subscription->subscription_start_date)
                                            @if($service->type === 'one_time_service')
                                                <span class="text-muted">{{ $subscription->subscription_start_date->format('M d') }}</span>
                                            @else
                                                <span class="text-muted">
                                                    {{ $subscription->subscription_start_date->format('M d') }}
                                                    @if($subscription->subscription_end_date)
                                                        - {{ $subscription->subscription_end_date->format('M d') }}
                                                    @endif
                                                </span>
                                            @endif
                                        @endif
                                    </div>
                                @else
                                    <span class="text-muted">المتبقي: {{ $subscription->renewal_due_date ?? 'N/A' }}</span>
                                    @if(($subscription->price - $subscription->discount - $subscription->paid_amount) > 0)
                                        <span class="text-danger fw-bold">غير مدفوع</span>
                                    @else
                                        <span class="text-success fw-bold">مدفوع</span>
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-info text-center">
                    لا توجد نتائج مطابقة.
                </div>
            </div>
        @endforelse
    </div>
</div>

@endsection

@push('styles')
<style>
    .hover-shadow:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }
    .transition-all {
        transition: all 0.3s ease;
    }
    
    /* Circular Progress */
    .progress-circle {
        position: relative;
        width: 40px;
        height: 40px;
    }
    .circular-chart {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        max-height: 100%;
    }
    .circle-bg {
        fill: none;
        stroke: #eee;
        stroke-width: 3.8;
    }
    .circle {
        fill: none;
        stroke-width: 2.8;
        stroke-linecap: round;
        animation: progress 1s ease-out forwards;
        stroke: #0d6efd;
    }
    .percentage {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.6rem;
    }
    
    body.dark-mode .card {
        background-color: #1e293b;
        color: #fff;
    }
    body.dark-mode .card-title {
        color: #fff !important;
    }
    body.dark-mode .text-muted {
        color: #94a3b8 !important;
    }
    body.dark-mode .bg-light {
        background-color: #334155 !important;
        color: #fff !important;
    }
    body.dark-mode .card-footer {
        background-color: #334155 !important;
    }
    body.dark-mode .circle-bg {
        stroke: #334155;
    }
</style>
@endpush
