@extends('layouts.app')

@section('title', 'الخدمات')

@php
    $totalServices = $services->total();
    $activeServices = collect($services->items())->where('is_active', true)->count();
    $categories = collect($services->items())->pluck('category')->filter()->unique()->count();
@endphp

@section('content')
<x-clinic-hero
    title="كتالوج الخدمات"
    subtitle="الخدمات والإجراءات المتاحة في العيادة وأسعارها"
    icon="ti-list-details"
    tone="invoices"
    :stats="[
        ['icon' => 'ti-list', 'value' => $totalServices, 'label' => 'إجمالي'],
        ['icon' => 'ti-check', 'value' => $activeServices, 'label' => 'مفعّلة'],
        ['icon' => 'ti-category', 'value' => $categories, 'label' => 'فئات'],
    ]"
>
    <x-slot:actions>
        @can('services.create')
            <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#serviceModal" onclick="window.ServiceModal.openNew()">
                <i class="ti ti-plus me-1"></i> خدمة جديدة
            </button>
        @endcan
    </x-slot:actions>
</x-clinic-hero>

<div class="card clinic-section">
    <div class="card-header">
        <h3 class="card-title"><i class="ti ti-list me-1"></i> الخدمات</h3>
    </div>
    @if($services->isEmpty())
        <div class="card-body">
            <div class="empty-card-rich">
                <i class="ti ti-list-details"></i>
                <h3>لا توجد خدمات بعد</h3>
                <p>أضف الخدمات والكشوفات اللي العيادة بتقدمها وأسعارها.</p>
            </div>
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-vcenter clinic-table mb-0">
                <thead>
                    <tr>
                        <th>الكود</th>
                        <th>الخدمة</th>
                        <th>الفئة</th>
                        <th class="text-end">السعر</th>
                        <th>المدة</th>
                        <th>الحالة</th>
                        <th class="w-1 text-end">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($services as $s)
                        <tr>
                            <td><code class="text-mono-en">{{ $s->code }}</code></td>
                            <td>
                                <strong>{{ $s->name }}</strong>
                                @if($s->description)
                                    <div class="small text-muted">{{ Str::limit($s->description, 60) }}</div>
                                @endif
                            </td>
                            <td>
                                @if($s->category)
                                    <span class="status-pill bg-info-lt text-info">
                                        <i class="ti ti-tag"></i>{{ $s->category }}
                                    </span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td class="text-end fw-bold text-mono-en">
                                {{ number_format($s->price, 2) }} <x-sar class="text-muted" />
                            </td>
                            <td>
                                @if($s->duration_minutes)
                                    <span class="text-muted small">{{ $s->duration_minutes }} د</span>
                                @else
                                    <span class="text-muted">—</span>
                                @endif
                            </td>
                            <td>
                                @if($s->is_active)
                                    <span class="status-pill bg-success-lt text-success">
                                        <i class="ti ti-check"></i> مفعّلة
                                    </span>
                                @else
                                    <span class="status-pill bg-secondary-lt text-secondary">
                                        <i class="ti ti-pause"></i> معطّلة
                                    </span>
                                @endif
                            </td>
                            <td class="text-end text-nowrap">
                                <div class="btn-list flex-nowrap justify-content-end">
                                    @can('services.update')
                                        <button class="btn btn-sm btn-icon btn-outline-secondary"
                                                data-edit-service='@json($s)' title="تعديل">
                                            <i class="ti ti-edit"></i>
                                        </button>
                                    @endcan
                                    @can('services.delete')
                                        <button class="btn btn-sm btn-icon btn-outline-danger"
                                                data-delete-service="{{ $s->id }}" title="حذف">
                                            <i class="ti ti-trash"></i>
                                        </button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($services->hasPages())
            <div class="card-footer">{{ $services->links() }}</div>
        @endif
    @endif
</div>

<x-modal id="serviceModal" title="خدمة" size="md">
    <form id="serviceForm">
        @csrf
        <input type="hidden" id="serviceId" name="id">
        <input type="hidden" id="serviceMethod" value="POST">
        <x-form-input name="name" label="اسم الخدمة" required />
        <x-form-input name="code" label="الكود" required />
        <x-form-input name="category" label="الفئة" />
        <div class="row">
            <div class="col-md-6"><x-form-input name="price" label="السعر" type="number" required step="0.01" /></div>
            <div class="col-md-6"><x-form-input name="duration_minutes" label="المدة (دقائق)" type="number" /></div>
        </div>
        <x-form-textarea name="description" label="الوصف" rows="2" />
        <div class="text-end mt-3">
            <button type="button" class="btn btn-link" data-bs-dismiss="modal">إلغاء</button>
            <button type="submit" class="btn btn-primary">حفظ</button>
        </div>
    </form>
</x-modal>
@endsection

@push('scripts')
<script>
window.ServiceModal = (function () {
    const $form = $('#serviceForm');
    const $modal = $('#serviceModal');

    function reset() { $form.trigger('reset'); $('#serviceId').val(''); $('#serviceMethod').val('POST'); }
    function openNew() { reset(); $modal.modal('show'); }
    function openEdit(s) {
        reset(); $('#serviceId').val(s.id); $('#serviceMethod').val('PUT');
        Object.entries(s).forEach(([k, v]) => $form.find(`[name="${k}"]`).val(v));
        $modal.modal('show');
    }

    $form.on('submit', function (e) {
        e.preventDefault();
        const id = $('#serviceId').val();
        const method = $('#serviceMethod').val();
        $.ajax({
            url: id ? `${APP_BASE_URL}/services/${id}` : @json(route('services.store')),
            method, data: $form.serialize(), globalErrorHandled: true,
        }).done(() => { Notify.success('تم الحفظ.'); $modal.modal('hide'); window.location.reload(); })
          .fail(xhr => Notify.error(xhr.responseJSON?.message || 'خطأ.'));
    });

    return { openNew, openEdit, reset };
})();

$(document).on('click', '[data-edit-service]', function () { window.ServiceModal.openEdit($(this).data('edit-service')); });
$(document).on('click', '[data-delete-service]', function () {
    const id = $(this).data('delete-service');
    Notify.confirmDelete('حذف الخدمة؟', () => {
        $.ajax({ url: `${APP_BASE_URL}/services/${id}`, method: 'DELETE' })
            .done(() => { Notify.success('تم الحذف.'); window.location.reload(); });
    });
});
</script>
@endpush