@extends('layouts.app')
@section('title', 'أمر تركيب')
@section('page_title', 'أمر التركيب ' . $installation->code)
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('installations.index') }}">أوامر التركيب</a></li>
    <li class="breadcrumb-item active">{{ $installation->code }}</li>
@endsection

@section('page_actions')
    @can('installations.edit')
        <a href="{{ route('installations.edit', $installation) }}" class="btn btn-light"><i class="fa-solid fa-pen ms-2"></i>تعديل</a>
        @if ($installation->status !== 'completed')
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#completeModal">
                <i class="fa-solid fa-circle-check ms-2"></i>إنهاء الأمر
            </button>
        @endif
    @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-{{ $installation->status_color }}"><i class="fa-solid fa-screwdriver-wrench"></i></div>
                    <div>
                        <h2 class="h5 fw-bold mb-1">{{ $installation->code }}</h2>
                        <div class="text-muted small">{{ $installation->type_label }}</div>
                        <div class="mt-2">{!! badge($installation->status_label, $installation->status_color) !!}</div>
                    </div>
                </div>

                <ul class="detail-list">
                    <li><span class="dl-label">العميل</span>
                        <span class="dl-value"><a href="{{ route('customers.show', $installation->customer) }}">{{ $installation->customer?->display_name ?? '—' }}</a></span>
                    </li>
                    <li><span class="dl-label">الجوال</span><span class="dl-value">{{ $installation->customer?->phone ?? '—' }}</span></li>
                    <li><span class="dl-label">المركبة</span>
                        <span class="dl-value">
                            @if ($installation->vehicle)
                                <a href="{{ route('vehicles.show', $installation->vehicle) }}">{{ $installation->vehicle->full_name }}</a>
                            @else — @endif
                        </span>
                    </li>
                    <li><span class="dl-label">الفني</span><span class="dl-value">{{ $installation->technician?->name ?? 'لم يُسند' }}</span></li>
                    <li><span class="dl-label">موعد التنفيذ</span><span class="dl-value">{{ arabicDate($installation->scheduled_at, true) }}</span></li>
                    <li><span class="dl-label">تاريخ الإنجاز</span><span class="dl-value">{{ arabicDate($installation->completed_at, true) }}</span></li>
                    <li><span class="dl-label">الموقع</span><span class="dl-value">{{ $installation->location ?: '—' }}</span></li>
                    <li><span class="dl-label">العنوان</span><span class="dl-value">{{ $installation->address ?: '—' }}</span></li>
                    <li><span class="dl-label">التكلفة</span><span class="dl-value">{{ currency($installation->cost) }}</span></li>
                    <li><span class="dl-label">الفاتورة</span>
                        <span class="dl-value">
                            @if ($installation->invoice)
                                <a href="{{ route('invoices.show', $installation->invoice) }}">{{ $installation->invoice->code }}</a>
                            @else — @endif
                        </span>
                    </li>
                    <li><span class="dl-label">أنشأه</span><span class="dl-value">{{ $installation->creator?->name ?? '—' }}</span></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-xl-7">
        <div class="card mb-3">
            <div class="card-header"><span><i class="fa-solid fa-microchip text-info ms-2"></i>الأجهزة ({{ $installation->items->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>IMEI</th><th>الجهاز</th><th>الشريحة</th><th class="text-center">الحالة</th></tr></thead>
                    <tbody>
                    @forelse ($installation->items as $item)
                        @php $device = $item->deviceUnit; @endphp
                        <tr>
                            <td>
                                @if ($device)
                                    <a href="{{ route('devices.show', $device) }}" class="font-monospace text-decoration-none">{{ $device->imei }}</a>
                                @else — @endif
                            </td>
                            <td>{{ $device?->product?->name ?? '—' }}</td>
                            <td>{{ $device?->sim_number ?: '—' }}</td>
                            <td class="text-center">{!! $device ? badge($device->status_label, $device->status_color) : '—' !!}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="text-center text-muted py-4">لم تُحدَّد أجهزة لهذا الأمر</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if ($installation->technician_notes)
            <div class="card mb-3">
                <div class="card-header"><span><i class="fa-solid fa-user-gear text-primary ms-2"></i>ملاحظات الفني</span></div>
                <div class="card-body"><p class="mb-0" style="white-space: pre-line">{{ $installation->technician_notes }}</p></div>
            </div>
        @endif

        @if ($installation->notes)
            <div class="card">
                <div class="card-header"><span><i class="fa-solid fa-note-sticky text-warning ms-2"></i>ملاحظات عامة</span></div>
                <div class="card-body"><p class="mb-0" style="white-space: pre-line">{{ $installation->notes }}</p></div>
            </div>
        @endif
    </div>
</div>

@can('installations.edit')
<div class="modal fade" id="completeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('installations.complete', $installation) }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa-solid fa-circle-check ms-2"></i>إنهاء أمر التركيب</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info small">
                        سيتم تعليم كل الأجهزة المرتبطة بالأمر كـ «مركّبة» وربطها بالعميل والمركبة.
                    </div>

                    <div class="mb-3">
                        <label class="form-label">ملاحظات الفني</label>
                        <textarea name="technician_notes" class="form-control" rows="3">{{ $installation->technician_notes }}</textarea>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" name="create_subscription" value="1" id="createSub" checked>
                        <label class="form-check-label" for="createSub">إنشاء اشتراك منصة تتبع لكل جهاز</label>
                    </div>

                    <div class="row g-2" id="subFields">
                        <div class="col-6">
                            <label class="form-label">مدة الاشتراك (شهر)</label>
                            <input type="number" name="subscription_months" value="12" min="1" max="60" class="form-control">
                        </div>
                        <div class="col-6">
                            <label class="form-label">قيمة الاشتراك</label>
                            <input type="number" step="0.01" min="0" name="subscription_amount" value="{{ (float) (\App\Models\Product::where('code', 'SUB-12M')->value('sale_price') ?? 0) }}" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success"><i class="fa-solid fa-check ms-2"></i>إنهاء الأمر</button>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan
@endsection

@push('scripts')
<script>
$(function () {
    $('#createSub').on('change', function () { $('#subFields').toggle(this.checked); }).trigger('change');
});
</script>
@endpush