@extends('layouts.app')
@section('title', 'Order Servis')
@section('breadcrumb')
    <li class="breadcrumb-item active">Order Servis</li>
@endsection
@section('content')
<div class="page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <h4><i class="bi bi-clipboard-check me-2 text-primary"></i>Order Servis</h4>
    <a href="{{ route('service-orders.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i> Buat Order Baru
    </a>
</div>

<div class="card">
    <div class="card-body border-bottom">
        <form method="GET" class="row g-2">
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" class="form-control" placeholder="No. order atau nama pelanggan..." value="{{ request('search') }}">
                </div>
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">Semua Status</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Menunggu</option>
                    <option value="diagnosa" {{ request('status') === 'diagnosa' ? 'selected' : '' }}>Diagnosa</option>
                    <option value="proses" {{ request('status') === 'proses' ? 'selected' : '' }}>Proses</option>
                    <option value="menunggu_part" {{ request('status') === 'menunggu_part' ? 'selected' : '' }}>Menunggu Part</option>
                    <option value="selesai" {{ request('status') === 'selesai' ? 'selected' : '' }}>Selesai</option>
                    <option value="diambil" {{ request('status') === 'diambil' ? 'selected' : '' }}>Diambil</option>
                    <option value="batal" {{ request('status') === 'batal' ? 'selected' : '' }}>Dibatalkan</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}" placeholder="Dari tanggal">
            </div>
            <div class="col-md-2">
                <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}" placeholder="Sampai tanggal">
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-fill">Filter</button>
                <a href="{{ route('service-orders.index') }}" class="btn btn-outline-secondary"><i class="bi bi-x"></i></a>
            </div>
        </form>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>No. Order</th>
                    <th>Pelanggan</th>
                    <th>Perangkat</th>
                    <th>Teknisi</th>
                    <th>Tgl Masuk</th>
                    <th>Est. Selesai</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($orders as $order)
                <tr>
                    <td>
                        <a href="{{ route('service-orders.show', $order) }}" class="fw-medium text-decoration-none">{{ $order->order_number }}</a>
                    </td>
                    <td>
                        <div class="fw-medium small">{{ $order->customer->name }}</div>
                        <div class="text-muted" style="font-size:.7rem;">{{ $order->customer->phone }}</div>
                    </td>
                    <td>
                        <div class="small">{{ $order->deviceType->name }}</div>
                        <div class="text-muted" style="font-size:.7rem;">{{ $order->brand }} {{ $order->model }}</div>
                    </td>
                    <td class="small">{{ $order->technician?->user->name ?? '<span class="text-muted">-</span>' }}</td>
                    <td class="small">{{ $order->received_date->format('d/m/Y') }}</td>
                    <td class="small {{ $order->estimated_completion && $order->estimated_completion->isPast() && !in_array($order->status, ['selesai','diambil','batal']) ? 'text-danger fw-bold' : '' }}">
                        {{ $order->estimated_completion?->format('d/m/Y') ?? '-' }}
                    </td>
                    <td>
                        @php
                        $colors = ['pending'=>['bg'=>'#fef3c7','c'=>'#92400e'],'diagnosa'=>['bg'=>'#dbeafe','c'=>'#1e40af'],'proses'=>['bg'=>'#dcfce7','c'=>'#166534'],'menunggu_part'=>['bg'=>'#fee2e2','c'=>'#991b1b'],'selesai'=>['bg'=>'#d1fae5','c'=>'#065f46'],'diambil'=>['bg'=>'#e0e7ff','c'=>'#3730a3'],'batal'=>['bg'=>'#f3f4f6','c'=>'#374151']];
                        $c = $colors[$order->status] ?? ['bg'=>'#f3f4f6','c'=>'#374151'];
                        @endphp
                        <span class="badge" style="background:{{ $c['bg'] }};color:{{ $c['c'] }};">{{ $order->status_label }}</span>
                    </td>
                    <td>
                        <div class="d-flex gap-1">
                            <a href="{{ route('service-orders.show', $order) }}" class="btn btn-sm btn-outline-info"><i class="bi bi-eye"></i></a>
                            @if($order->isLocked())
                                <button class="btn btn-sm btn-outline-secondary" disabled title="Terkunci — invoice sudah lunas"><i class="bi bi-lock"></i></button>
                            @else
                                <a href="{{ route('service-orders.edit', $order) }}" class="btn btn-sm btn-outline-warning" title="Edit"><i class="bi bi-pencil"></i></a>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="8" class="text-center text-muted py-4">Tidak ada data order servis</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer d-flex align-items-center justify-content-between flex-wrap gap-2">
        <small class="text-muted">
            Menampilkan {{ $orders->firstItem() ?? 0 }}–{{ $orders->lastItem() ?? 0 }}
            dari {{ $orders->total() }} data
        </small>
        {{ $orders->withQueryString()->links() }}
    </div>
</div>
@endsection