@extends('layouts.app')
@section('title', $wo->work_order_number)

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $wo->work_order_number }}</h1>
            <p>
                <a href="{{ route('customers.show', $wo->customer) }}">{{ $wo->customer->display_name }}</a>
                &middot; <span class="badge info">{{ title_case_words($wo->type) }}</span>
                &middot; <span class="badge {{ status_color($wo->status) }}"><span class="dot"></span>{{ title_case_words($wo->status) }}</span>
                &middot; <span class="badge {{ $wo->priority === 'urgent' ? 'danger' : ($wo->priority === 'high' ? 'warning' : 'muted') }}">{{ $wo->priority }}</span>
            </p>
        </div>
        <div class="page-actions">
            @if ($wo->status === 'open')
                <button type="button" class="btn" data-modal="assign-modal">Assign technician</button>
            @elseif ($wo->status === 'assigned')
                <form method="POST" action="{{ route('work-orders.start', $wo) }}">@csrf
                    <button type="submit" class="btn">Start job</button>
                </form>
            @elseif ($wo->status === 'in_progress')
                <button type="button" class="btn success" data-modal="complete-modal">Complete job</button>
            @endif
            @if (! in_array($wo->status, ['completed', 'cancelled']))
                <button type="button" class="btn secondary" data-modal="material-modal">Add material</button>
            @endif
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Status', 'value' => title_case_words($wo->status),
            'variant' => $wo->status === 'completed' ? 'good' : ($wo->status === 'cancelled' ? 'bad' : 'warn'), 'href' => '#'])
        @include('components.kpi', ['label' => 'Technician', 'value' => $wo->technician?->name ?? 'Unassigned',
            'variant' => 'info', 'href' => '#'])
        @include('components.kpi', ['label' => 'Material cost', 'value' => money($wo->material_cost), 'href' => '#materials'])
        @include('components.kpi', ['label' => 'Scheduled', 'value' => $wo->scheduled_start?->format('d M H:i') ?? '—', 'href' => '#'])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Job detail</h3></div>
            <div class="card-body">
                <dl class="dl">
                    <dt>Job number</dt><dd class="mono">{{ $wo->work_order_number }}</dd>
                    <dt>Type</dt><dd>{{ title_case_words($wo->type) }}</dd>
                    <dt>Priority</dt><dd>{{ title_case_words($wo->priority) }}</dd>
                    <dt>Site address</dt><dd>{{ $wo->site_address }}</dd>
                    <dt>Service</dt>
                    <dd>@if ($wo->service)
                            <a href="{{ route('services.show', $wo->service) }}" class="mono">{{ $wo->service->service_number }}</a>
                        @else — @endif</dd>
                    <dt>Ticket</dt>
                    <dd>@if ($wo->ticket)
                            <a href="{{ route('tickets.show', $wo->ticket) }}" class="mono">{{ $wo->ticket->ticket_number }}</a>
                        @else — @endif</dd>
                    <dt>Technician</dt><dd>{{ $wo->technician?->name ?? 'Unassigned' }}</dd>
                    <dt>Scheduled</dt>
                    <dd>{{ $wo->scheduled_start?->format('d M Y H:i') ?? '—' }} – {{ $wo->scheduled_end?->format('H:i') ?? '—' }}</dd>
                    <dt>Started</dt><dd>{{ $wo->started_at?->format('d M Y H:i') ?? 'Not started' }}</dd>
                    <dt>Completed</dt><dd>{{ $wo->completed_at?->format('d M Y H:i') ?? '—' }}</dd>
                    <dt>Customer rating</dt>
                    <dd>{{ $wo->customer_rating ? str_repeat('★', $wo->customer_rating).str_repeat('☆', 5 - $wo->customer_rating) : 'Not rated' }}</dd>
                </dl>
                <hr style="border:none;border-top:1px solid var(--ink-200);margin:.9rem 0;">
                <div class="small muted mb-1"><strong>Description</strong></div>
                <p class="mb-0" style="white-space:pre-wrap;">{{ $wo->description }}</p>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Updates</h3>
                <span class="sub">{{ $wo->updates()->count() }} update(s)</span></div>
            <div class="card-body">
                @if ($wo->updates->isNotEmpty())
                    <div class="timeline">
                        @foreach ($wo->updates as $update)
                            <div class="timeline-item {{ $update->type === 'completion' ? 'ok' : '' }}">
                                <div class="t-head">{{ $update->user?->name ?? 'System' }}
                                    <span class="badge muted">{{ $update->type }}</span></div>
                                <div class="t-meta">{{ $update->created_at->format('d M Y H:i') }}</div>
                                <div class="t-body" style="white-space:pre-wrap;">{{ $update->note }}</div>
                            </div>
                        @endforeach
                    </div>
                @else
                    @include('components.empty-state', ['icon' => '&#128221;', 'title' => 'No updates yet'])
                @endif

                @if (! in_array($wo->status, ['completed', 'cancelled']))
                    <hr style="border:none;border-top:1px solid var(--ink-200);margin:1rem 0;">
                    <form method="POST" action="{{ route('work-orders.updates', $wo) }}">
                        @csrf
                        <input type="hidden" name="type" value="note">
                        <div class="field mb-1">
                            <label>Add an update <span class="req">*</span></label>
                            <textarea name="message" rows="3" required placeholder="Progress, findings, customer feedback…"></textarea>
                        </div>
                        <button type="submit" class="btn secondary sm">Log update</button>
                    </form>
                @endif
            </div>
        </div>
    </div>

    <div class="card" id="materials">
        <div class="card-head">
            <h3>Materials used</h3>
            <span class="sub">Total: {{ money($wo->material_cost) }}</span>
        </div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead><tr><th>Item</th><th class="num">Qty</th><th class="num">Unit cost</th><th class="num">Total</th><th>Added</th><th></th></tr></thead>
                    <tbody>
                    @forelse ($wo->materials as $material)
                        <tr>
                            <td><strong>{{ $material->product?->name ?? $material->description }}</strong>
                                @if ($material->product)
                                    <div class="tiny muted mono">{{ $material->product->sku }}</div>
                                @endif</td>
                            <td class="num">{{ $material->quantity }}</td>
                            <td class="num">{{ money($material->unit_cost) }}</td>
                            <td class="num strong">{{ money($material->total_cost) }}</td>
                            <td class="small">{{ $material->created_at->format('d M H:i') }}</td>
                            <td class="right">
                                <form method="POST" action="{{ route('work-orders.materials.destroy', $material) }}"
                                      data-confirm="Remove this material line?">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn xs danger">&times;</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6">
                            @include('components.empty-state', ['icon' => '&#128230;', 'title' => 'No materials recorded',
                                'message' => 'Add stock items consumed during the job.',
                                'action' => '<button type="button" class="btn sm" data-modal="material-modal">Add material</button>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="assign-modal">
        <div class="modal">
            <form method="POST" action="{{ route('work-orders.assign', $wo) }}">
                @csrf
                <div class="modal-head"><h3>Assign technician</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Technician <span class="req">*</span></label>
                            <select name="technician_id" required>
                                <option value="">Select…</option>
                                @foreach ($technicians as $technician)
                                    <option value="{{ $technician->id }}" @disabled(! $technician->is_available)>
                                        {{ $technician->name }} — {{ $technician->jobs_today_count }}/{{ $technician->max_jobs_per_day }} today
                                    </option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Scheduled start</label>
                            <input type="datetime-local" name="scheduled_start"
                                   value="{{ $wo->scheduled_start?->format('Y-m-d\TH:i') }}"></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Assign</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="material-modal">
        <div class="modal">
            <form method="POST" action="{{ route('work-orders.materials', $wo) }}">
                @csrf
                <div class="modal-head"><h3>Add material</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Product <span class="req">*</span></label>
                            <select name="product_id" required>
                                <option value="">Select a product…</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}">
                                        {{ $product->name }} ({{ $product->stock_level }} in stock)
                                    </option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Quantity <span class="req">*</span></label>
                            <input type="number" name="quantity" min="1" step="1" required value="1"></div>
                        <div class="field"><label>Unit cost</label>
                            <input type="number" name="unit_cost" step="0.01" min="0" placeholder="Product cost price"></div>
                        <div class="field"><label>Notes</label>
                            <input type="text" name="notes"></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Add material</button>
                </div>
            </form>
        </div>
    </div>

    <div class="modal-backdrop" id="complete-modal">
        <div class="modal">
            <form method="POST" action="{{ route('work-orders.complete', $wo) }}">
                @csrf
                <div class="modal-head"><h3>Complete work order</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Completion summary <span class="req">*</span></label>
                            <textarea name="completion_notes" rows="4" required placeholder="What was done? What was tested?"></textarea></div>
                        <div class="field"><label>CPE serial installed</label>
                            <input type="text" name="cpe_serial" class="mono" value="{{ $wo->service?->cpe_serial }}"></div>
                        <div class="field"><label>CPE MAC</label>
                            <input type="text" name="cpe_mac" class="mono" value="{{ $wo->service?->cpe_mac }}"></div>
                        <div class="field"><label>OLT port</label>
                            <input type="text" name="olt_port" class="mono" value="{{ $wo->service?->pon_port }}"></div>
                        <div class="field"><label>Splitter</label>
                            <input type="text" name="splitter" class="mono" value="{{ $wo->service?->splitter }}"></div>
                        <div class="field"><label>Labour hours</label>
                            <input type="number" name="labour_hours" step="0.25" min="0" value="1"></div>
                    </div>
                    <p class="small muted mt-1">Completing an installation job can activate the linked service.</p>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn success">Complete job</button>
                </div>
            </form>
        </div>
    </div>
@endsection