@extends('layouts.master')
@section('title', 'Senarai Kerja')
@section('actions')
<a href="{{ route('repair-jobs.create') }}" class="btn btn-primary d-none d-sm-inline-flex">
    <i class="ti ti-plus me-1"></i>Kerja Baharu
</a>
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        <form class="row g-2 mb-3">
            <div class="col-md-4">
                <div class="input-icon">
                    <span class="input-icon-addon"><i class="ti ti-search"></i></span>
                    <input type="text" name="search" class="form-control" placeholder="Cari job number..." value="{{ $search ?? '' }}">
                </div>
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">Semua Status</option>
                    <option value="pending" {{ ($status ?? '') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="diagnosing" {{ ($status ?? '') == 'diagnosing' ? 'selected' : '' }}>Diagnosing</option>
                    <option value="awaiting_parts" {{ ($status ?? '') == 'awaiting_parts' ? 'selected' : '' }}>Awaiting Parts</option>
                    <option value="in_progress" {{ ($status ?? '') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="ready" {{ ($status ?? '') == 'ready' ? 'selected' : '' }}>Ready</option>
                    <option value="picked_up" {{ ($status ?? '') == 'picked_up' ? 'selected' : '' }}>Selesai</option>
                    <option value="cancelled" {{ ($status ?? '') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" name="date_from" class="form-control" value="{{ $dateFrom ?? '' }}" placeholder="Dari">
            </div>
            <div class="col-md-2">
                <input type="date" name="date_to" class="form-control" value="{{ $dateTo ?? '' }}" placeholder="Hingga">
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" type="submit"><i class="ti ti-search me-1"></i>Cari</button>
                <a href="{{ route('repair-jobs.index') }}" class="btn btn-outline-secondary"><i class="ti ti-x me-1"></i>Clear</a>
            </div>
        </form>
        <div class="table-responsive">
            <table class="table table-sm table-vcenter card-table">
                <thead>
                    <tr>
                        <th class="w-1">#</th>
                        <th>Pelanggan</th>
                        <th>Peranti</th>
                        <th>Status</th>
                        <th class="text-end">Kos</th>
                        <th class="text-center">Tempoh</th>
                        <th class="text-center">Tarikh</th>
                        <th class="w-1"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($jobs as $job)
                    <tr>
                        <td class="text-nowrap"><a href="{{ route('repair-jobs.show', $job) }}" class="fw-semibold">{{ $job->job_number }}</a></td>
                        <td class="text-nowrap">
                            {{ $job->device->customer->name ?? '-' }}
                            @php $phone = $job->device->customer->phone ?? null; @endphp
                            @if($phone)
                            <a href="https://wa.me/{{ wa_phone($phone) }}" target="_blank" class="text-success ms-1" title="WhatsApp {{ $phone }}">
                                <i class="ti ti-brand-whatsapp"></i>
                            </a>
                            @endif
                        </td>
                        <td class="text-nowrap">
                            @php
                                $deviceIcons = ['Laptop'=>'device-laptop','Printer'=>'printer','Desktop PC'=>'device-desktop','Tablet'=>'device-tablet','Smartphone'=>'device-mobile','Monitor'=>'monitor','Lain-Lain'=>'question-mark'];
                                $type = $job->device->type ?? '';
                            @endphp
                            <span class="badge bg-blue me-1 text-white"><i class="ti ti-{{ $deviceIcons[$type] ?? 'device-unknown' }} me-1"></i>{{ $type }}</span>
                            {{ $job->device->brand ?? '' }} {{ $job->device->model ?? '' }}
                        </td>
                        <td class="text-nowrap">
                            @php
                                $colors = ['pending'=>'yellow','diagnosing'=>'blue','awaiting_parts'=>'orange','in_progress'=>'cyan','ready'=>'purple','picked_up'=>'lime','cancelled'=>'red'];
                                $icons = ['pending'=>'clock','diagnosing'=>'search','awaiting_parts'=>'package','in_progress'=>'tool','ready'=>'check','picked_up'=>'truck-delivery','cancelled'=>'x'];
                                $statusLabels = ['pending'=>'Pending','diagnosing'=>'Diagnosing','awaiting_parts'=>'Awaiting Parts','in_progress'=>'In Progress','ready'=>'Ready','picked_up'=>'Selesai','cancelled'=>'Cancelled'];
                            @endphp
                            <span class="badge bg-{{ $colors[$job->status] ?? 'secondary' }} text-nowrap text-white">
                                <i class="ti ti-{{ $icons[$job->status] ?? 'circle' }} me-1"></i>
                                {{ $statusLabels[$job->status] ?? str_replace('_', ' ', ucfirst($job->status)) }}
                            </span>
                        </td>
                        <td class="text-end text-secondary fw-semibold text-nowrap">
                            @php
                                $totalPaid = $job->payments->sum('amount');
                                $isFullyPaid = $totalPaid > 0 && $totalPaid >= ($job->total_cost ?? 0);
                            @endphp
                            @if($isFullyPaid)
                            <i class="ti ti-circle-check text-success" title="Bayar"></i>
                            @elseif($totalPaid > 0)
                            <i class="ti ti-circle-half-2 text-warning" title="Bayar Sebahagian"></i>
                            @else
                            <i class="ti ti-circle-x text-danger" title="Belum Bayar"></i>
                            @endif
                            RM{{ number_format($job->total_cost ?? 0, 2) }}
                        </td>
                        <td class="text-center text-secondary">{{ $job->tempoh }}</td>
                        <td class="text-center text-secondary text-nowrap">
                            {{ $job->created_at->format('d/m/y') }}
                            @if($job->completed_date)
                            -{{ $job->completed_date->format('d/m/y') }}
                            @elseif($job->status === 'cancelled')
                            <span class="text-danger">-{{ $job->completed_date?->format('d/m/y') ?? '-' }}</span>
                            @endif
                        </td>
                        <td class="text-nowrap">
                            <a href="{{ route('repair-jobs.show', $job) }}" class="btn btn-primary btn-icon rounded-pill" title="Terperinci">
                                <i class="ti ti-eye"></i>
                            </a>
                            <a href="{{ route('repair-jobs.edit', $job) }}" class="btn btn-warning btn-icon rounded-pill" title="Edit">
                                <i class="ti ti-edit"></i>
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="8" class="text-center text-secondary py-4">Tiada repair job</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-3">
            {{ $jobs->links() }}
        </div>
    </div>
</div>
@endsection