@extends('garage.layouts.app')

@section('title', 'View Job Card')

@push('styles')
<style>
    .jc-detail-card {
        border: 1px solid #e8ecf4;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
    }
    .jc-detail-card .card-header {
        background: var(--garage-header-bg);
        border-bottom: 0;
        color: #fff;
    }
    .jc-detail-card .card-title {
        color: #fff;
    }
    .jc-detail-card .card-header .btn-outline-primary,
    .jc-detail-card .card-header .btn-outline-secondary {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.45);
    }
    .jc-detail-card .card-header .btn-outline-primary:hover,
    .jc-detail-card .card-header .btn-outline-secondary:hover {
        background: #fff;
        color: #0f172a;
        border-color: #fff;
    }
    .jc-info-panel {
        border: 1px solid #e9edf5;
        border-radius: 12px;
        padding: 0.6rem 0.8rem;
        background: #fcfdff;
        height: 100%;
    }
    .jc-info-panel table th {
        color: #475467;
        font-weight: 600;
    }
    .jc-summary-card {
        border: 1px solid #e9edf5;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(16, 24, 40, 0.05);
        background: #fff;
    }
    .jc-summary-card .small {
        color: #667085;
    }
    .jc-tabs.nav-tabs {
        border-bottom: 1px solid #d9e0ee;
    }
    .jc-tabs .nav-link {
        border: 0;
        color: #475467;
        border-radius: 10px 10px 0 0;
        font-weight: 600;
        padding: 0.55rem 0.95rem;
    }
    .jc-tabs .nav-link.active {
        color: var(--bs-primary);
        background: rgba(13, 148, 136, 0.10);
        border-bottom: 2px solid var(--bs-primary);
    }
    .jc-block-table {
        border: 1px solid #e9edf5;
        border-radius: 12px;
        overflow: hidden;
    }
    .jc-block-table .table {
        margin-bottom: 0;
    }
    .jc-block-table .table thead th {
        text-transform: uppercase;
        font-size: 0.76rem;
        letter-spacing: 0.02em;
    }
</style>
@endpush

@section('content')
@php
    $minutesToText = function ($minutes) {
        $m = (int) $minutes;
        $h = intdiv($m, 60);
        $r = $m % 60;
        if ($h <= 0) return $r . 'm';
        if ($r <= 0) return $h . 'h';
        return $h . 'h ' . $r . 'm';
    };
@endphp
<div class="row">
    <div class="col-12">
        <div class="card jc-detail-card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">
                    <i class="bi bi-file-earmark-text me-2"></i>Job Card Details
                </h5>
                <div>
                    @if($workOrder->status !== 'completed')
                    <a href="{{ route('garage.work-orders.edit', $workOrder->id) }}" class="btn btn-sm btn-outline-primary me-2">
                        <i class="bi bi-pencil me-1"></i>Edit
                    </a>
                    @endif
                        <a href="{{ route('garage.work-orders.queue') }}" class="btn btn-sm btn-outline-secondary me-2">
                            <i class="bi bi-kanban me-1"></i>Queue
                        </a>
                    <a href="{{ route('garage.work-orders.index') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i>Back to List
                    </a>
                </div>
            </div>
            <div class="card-body">
                <!-- Job Card Header Information -->
                <div class="row mb-4 g-3">
                    <div class="col-md-6">
                        <div class="jc-info-panel">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <th style="width: 150px;">Job Card Number:</th>
                                <td><span class="badge bg-secondary fs-6">{{ $workOrder->work_order_number }}</span></td>
                            </tr>
                            <tr>
                                <th>Job Card Date:</th>
                                <td>{{ \Carbon\Carbon::parse($workOrder->work_order_date)->format('M d, Y') }}</td>
                            </tr>
                            <tr>
                                <th>Start Date:</th>
                                <td>{{ $workOrder->start_date ? \Carbon\Carbon::parse($workOrder->start_date)->format('M d, Y') : '-' }}</td>
                            </tr>
                            <tr>
                                <th>Completion Date:</th>
                                <td>{{ $workOrder->completion_date ? \Carbon\Carbon::parse($workOrder->completion_date)->format('M d, Y') : '-' }}</td>
                            </tr>
                            <tr>
                                <th>Reference Number:</th>
                                <td>{{ $workOrder->reference_number ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>{{ $glOrder ?? 'Order' }}:</th>
                                <td>{{ $workOrder->repair_order_number ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Slot:</th>
                                <td>{{ $workOrder->slot_name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Estimate:</th>
                                <td>{{ $workOrder->estimate_number ?? '-' }}</td>
                            </tr>
                        </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="jc-info-panel">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <th style="width: 150px;">Customer:</th>
                                <td>{{ $workOrder->customer_name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Vehicle:</th>
                                <td>
                                    @if($workOrder->vehicle_registration)
                                    {{ $workOrder->vehicle_registration }}
                                    @if($workOrder->vehicle_make && $workOrder->vehicle_model)
                                    <small class="text-muted">({{ $workOrder->vehicle_make }} {{ $workOrder->vehicle_model }})</small>
                                    @endif
                                    @else
                                    <span class="text-muted">-</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Priority:</th>
                                <td>
                                    @php
                                        $priorityColors = [
                                            0 => 'secondary',
                                            1 => 'warning',
                                            2 => 'danger'
                                        ];
                                        $priorityLabels = [
                                            0 => 'Normal',
                                            1 => 'High',
                                            2 => 'Urgent'
                                        ];
                                        $priorityColor = $priorityColors[$workOrder->priority] ?? 'secondary';
                                    @endphp
                                    <span class="badge bg-{{ $priorityColor }}">{{ $priorityLabels[$workOrder->priority] ?? 'Normal' }}</span>
                                </td>
                            </tr>
                            <tr>
                                <th>Status:</th>
                                <td>
                                    @php
                                        $statusColors = [
                                            'draft' => 'secondary',
                                            'in_progress' => 'info',
                                            'on_hold' => 'warning',
                                            'completed' => 'success',
                                            'cancelled' => 'danger'
                                        ];
                                        $statusColor = $statusColors[$workOrder->status] ?? 'secondary';
                                    @endphp
                                    <span class="badge bg-{{ $statusColor }} fs-6">{{ ucfirst(str_replace('_', ' ', $workOrder->status)) }}</span>
                                </td>
                            </tr>
                            <tr>
                                <th>Subtotal:</th>
                                <td>PKR {{ number_format($workOrder->subtotal, 2) }}</td>
                            </tr>
                            <tr>
                                <th>Tax Amount:</th>
                                <td>PKR {{ number_format($workOrder->tax_amount, 2) }}</td>
                            </tr>
                            <tr>
                                <th>Discount:</th>
                                <td>PKR {{ number_format($workOrder->discount_amount, 2) }}</td>
                            </tr>
                            <tr>
                                <th>Total Amount:</th>
                                <td class="fw-bold fs-5">PKR {{ number_format($workOrder->total_amount, 2) }}</td>
                            </tr>
                        </table>
                        </div>
                    </div>
                </div>

                <ul class="nav nav-tabs jc-tabs mb-3" id="woDetailTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="wo-overview-tab" data-bs-toggle="tab" data-bs-target="#wo-overview" type="button" role="tab">
                            Overview
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="wo-tasks-tab" data-bs-toggle="tab" data-bs-target="#wo-tasks" type="button" role="tab">
                            Tasks & Timing
                        </button>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade show active" id="wo-overview" role="tabpanel">
                        @if($workOrder->work_description)
                        <div class="mb-4">
                            <h6 class="mb-2">Work Description</h6>
                            <div class="card bg-light">
                                <div class="card-body">
                                    <p class="mb-0">{{ nl2br(e($workOrder->work_description)) }}</p>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($workOrder->customer_notes || $workOrder->internal_notes)
                        <div class="row mb-4">
                            @if($workOrder->customer_notes)
                            <div class="col-md-6">
                                <h6 class="mb-2">Customer Notes</h6>
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <p class="mb-0">{{ nl2br(e($workOrder->customer_notes)) }}</p>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if($workOrder->internal_notes)
                            <div class="col-md-6">
                                <h6 class="mb-2">Internal Notes</h6>
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <p class="mb-0">{{ nl2br(e($workOrder->internal_notes)) }}</p>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                        @endif

                        <div class="mb-4">
                            <h6 class="mb-3">Job Card Items</h6>
                            <div class="table-responsive jc-block-table">
                                <table class="table table-bordered">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Item</th>
                                            <th>Type</th>
                                            <th>Qty</th>
                                            <th>Qty Used</th>
                                            <th>ETA</th>
                                            <th class="text-end">Unit Price</th>
                                            <th class="text-end">Discount</th>
                                            <th class="text-end">Tax %</th>
                                            <th class="text-end">Tax Amount</th>
                                            <th class="text-end">Total</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($items as $index => $item)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                <div class="fw-semibold">
                                                    {{ $item->part_name ?? $item->labor_name ?? $item->service_group_name ?? $item->garage_service_name ?? $item->description ?? '-' }}
                                                </div>
                                                @if($item->notes)
                                                <small class="text-muted">{{ $item->notes }}</small>
                                                @endif
                                            </td>
                                            <td><span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $item->item_type)) }}</span></td>
                                            <td>{{ $item->quantity }}</td>
                                            <td>{{ $item->quantity_used ?? 0 }}</td>
                                            <td>
                                                @php
                                                    $eta = null;
                                                    if (($item->item_type ?? '') === 'garage_service') {
                                                        $eta = isset($item->estimated_minutes) && $item->estimated_minutes !== null && $item->estimated_minutes !== ''
                                                            ? (int) $item->estimated_minutes
                                                            : (isset($item->garage_service_required_minutes) ? (int) $item->garage_service_required_minutes : 0);
                                                    } elseif (($item->item_type ?? '') === 'labor' || ($item->item_type ?? '') === 'service_group') {
                                                        $eta = isset($item->estimated_minutes) ? (int) $item->estimated_minutes : 0;
                                                    }
                                                @endphp
                                                @if($eta === null)
                                                    <span class="text-muted">—</span>
                                                @else
                                                    <span class="badge bg-light text-dark border">{{ $minutesToText($eta) }}</span>
                                                @endif
                                            </td>
                                            <td class="text-end">PKR {{ number_format($item->unit_price, 2) }}</td>
                                            <td class="text-end">PKR {{ number_format($item->discount_amount, 2) }}</td>
                                            <td class="text-end">{{ number_format($item->tax_rate, 2) }}%</td>
                                            <td class="text-end">PKR {{ number_format($item->tax_amount, 2) }}</td>
                                            <td class="text-end fw-bold">PKR {{ number_format($item->total_price, 2) }}</td>
                                            <td>
                                                @php
                                                    $itemStatusColors = ['pending' => 'secondary','in_progress' => 'info','completed' => 'success'];
                                                    $itemStatusColor = $itemStatusColors[$item->status] ?? 'secondary';
                                                @endphp
                                                <span class="badge bg-{{ $itemStatusColor }}">{{ ucfirst(str_replace('_', ' ', $item->status)) }}</span>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot class="table-light">
                                        <tr><td colspan="6" class="text-end fw-bold">Subtotal:</td><td colspan="4" class="text-end fw-bold">PKR {{ number_format($workOrder->subtotal, 2) }}</td></tr>
                                        <tr><td colspan="6" class="text-end fw-bold">Tax:</td><td colspan="4" class="text-end fw-bold">PKR {{ number_format($workOrder->tax_amount, 2) }}</td></tr>
                                        <tr><td colspan="6" class="text-end fw-bold">Discount:</td><td colspan="4" class="text-end fw-bold">PKR {{ number_format($workOrder->discount_amount, 2) }}</td></tr>
                                        <tr><td colspan="6" class="text-end fw-bold fs-5">Total:</td><td colspan="4" class="text-end fw-bold fs-5">PKR {{ number_format($workOrder->total_amount, 2) }}</td></tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="wo-tasks" role="tabpanel">
                        <div class="row g-2 mb-3">
                            <div class="col-md-2"><div class="card jc-summary-card"><div class="card-body py-2"><div class="small">Total Estimated</div><div class="fw-bold">{{ $minutesToText($taskSummary['total_estimated_minutes'] ?? 0) }}</div></div></div></div>
                            <div class="col-md-2"><div class="card jc-summary-card"><div class="card-body py-2"><div class="small">Total Actual</div><div class="fw-bold">{{ $minutesToText($taskSummary['total_actual_minutes'] ?? 0) }}</div></div></div></div>
                            <div class="col-md-2"><div class="card jc-summary-card"><div class="card-body py-2"><div class="small">Total Pending</div><div class="fw-bold">{{ $minutesToText($taskSummary['total_pending_minutes'] ?? 0) }}</div></div></div></div>
                            <div class="col-md-2"><div class="card jc-summary-card"><div class="card-body py-2"><div class="small">Total Delay</div><div class="fw-bold text-danger">{{ $minutesToText($taskSummary['total_delay_minutes'] ?? 0) }}</div></div></div></div>
                            <div class="col-md-2"><div class="card jc-summary-card"><div class="card-body py-2"><div class="small">Completed</div><div class="fw-bold text-success">{{ (int)($taskSummary['completed_tasks_count'] ?? 0) }}</div></div></div></div>
                            <div class="col-md-2"><div class="card jc-summary-card"><div class="card-body py-2"><div class="small">Pending</div><div class="fw-bold text-warning">{{ (int)($taskSummary['pending_tasks_count'] ?? 0) }}</div></div></div></div>
                        </div>

                        <div class="alert alert-info border mb-3">
                            <i class="bi bi-info-circle me-1"></i>
                            Parts/services are fetched from {{ $glOrder ?? 'Order' }} or Estimate and shown read-only on Job Card.
                            You can update required completion time in the task rows below.
                        </div>

                        <div class="table-responsive jc-block-table">
                            <table class="table table-bordered table-sm align-middle">
                                <thead class="table-light">
                                <tr>
                                    <th>Task</th>
                                    <th>Assigned To</th>
                                    <th>Estimated</th>
                                    <th>Start Time</th>
                                    <th>End Time</th>
                                    <th>Actual</th>
                                    <th>Pending</th>
                                    <th>Delay</th>
                                    <th>Status</th>
                                    <th style="min-width: 270px;">Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($tasks as $task)
                                    <tr>
                                        <td>
                                            <div class="fw-semibold">{{ $task->task_name }}</div>
                                            @if(!empty($task->source_item_type))
                                                <span class="badge bg-light text-dark border text-uppercase">{{ str_replace('_', ' ', $task->source_item_type) }}</span>
                                            @endif
                                            @if($task->remarks)<small class="text-muted">{{ $task->remarks }}</small>@endif
                                        </td>
                                        <td>{{ $task->assigned_to_name ?: '-' }}</td>
                                        <td>{{ $minutesToText($task->estimated_minutes) }}</td>
                                        <td>{{ $task->start_time ? \Carbon\Carbon::parse($task->start_time)->format('M d, Y h:i A') : '-' }}</td>
                                        <td>{{ $task->end_time ? \Carbon\Carbon::parse($task->end_time)->format('M d, Y h:i A') : '-' }}</td>
                                        <td>
                                            <span
                                                class="js-live-actual"
                                                data-base-minutes="{{ (int)$task->actual_minutes }}"
                                                data-open-start="{{ $task->open_started_at ? \Carbon\Carbon::parse($task->open_started_at)->toIso8601String() : '' }}"
                                            >{{ $minutesToText($task->actual_minutes) }}</span>
                                            @if($task->status === 'in_progress' && $task->open_started_at)
                                                <span class="badge bg-success-subtle text-success border border-success-subtle ms-1">Running</span>
                                            @endif
                                        </td>
                                        <td>{{ $minutesToText($task->pending_minutes) }}</td>
                                        <td class="{{ $task->delay_minutes > 0 ? 'text-danger fw-semibold' : '' }}">{{ $minutesToText($task->delay_minutes) }}</td>
                                        <td><span class="badge bg-secondary">{{ ucfirst(str_replace('_', ' ', $task->status)) }}</span></td>
                                        <td>
                                            <div class="d-flex flex-wrap gap-1 mb-1">
                                                @if(in_array($task->status, ['pending','assigned','paused']))
                                                    <form method="POST" action="{{ route('garage.work-orders.tasks.start', [$workOrder->id, $task->id]) }}">@csrf<button class="btn btn-sm btn-outline-success" type="submit">Start</button></form>
                                                @endif
                                                @if($task->status === 'in_progress')
                                                    <form method="POST" action="{{ route('garage.work-orders.tasks.pause', [$workOrder->id, $task->id]) }}">@csrf<button class="btn btn-sm btn-outline-warning" type="submit">Pause</button></form>
                                                @endif
                                                @if($task->status === 'paused')
                                                    <form method="POST" action="{{ route('garage.work-orders.tasks.resume', [$workOrder->id, $task->id]) }}">@csrf<button class="btn btn-sm btn-outline-info" type="submit">Resume</button></form>
                                                @endif
                                                @if(in_array($task->status, ['pending','assigned','in_progress','paused']))
                                                    <form method="POST" action="{{ route('garage.work-orders.tasks.complete', [$workOrder->id, $task->id]) }}">@csrf<button class="btn btn-sm btn-outline-primary" type="submit">Complete</button></form>
                                                    <form method="POST" action="{{ route('garage.work-orders.tasks.cancel', [$workOrder->id, $task->id]) }}">@csrf<button class="btn btn-sm btn-outline-danger" type="submit">Cancel</button></form>
                                                @endif
                                            </div>
                                            @if($workOrder->status !== 'completed' && $workOrder->status !== 'cancelled')
                                            <form method="POST" action="{{ route('garage.work-orders.tasks.update', [$workOrder->id, $task->id]) }}" class="row g-1">
                                                @csrf
                                                @method('PUT')
                                                <input type="hidden" name="task_name" value="{{ $task->task_name }}">
                                                <input type="hidden" name="assigned_to_garage_employee_id" value="{{ $task->assigned_to_garage_employee_id }}">
                                                <div class="col-4"><input type="number" min="0" class="form-control form-control-sm" name="estimated_minutes" value="{{ (int)$task->estimated_minutes }}" placeholder="Required time (min)"></div>
                                                <div class="col-6"><input type="text" class="form-control form-control-sm" name="remarks" value="{{ $task->remarks }}" placeholder="Time update note (optional)"></div>
                                                <div class="col-2"><button type="submit" class="btn btn-sm btn-outline-secondary w-100">Update Time</button></div>
                                            </form>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="10" class="text-center text-muted py-4">No tasks added yet.</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-2 mt-3">
                    <a href="{{ route('garage.work-orders.index') }}" class="btn btn-secondary">Back to List</a>
                    @if($workOrder->status !== 'completed')
                    <a href="{{ route('garage.work-orders.edit', $workOrder->id) }}" class="btn btn-primary">
                        <i class="bi bi-pencil me-1"></i>Edit Job Card
                    </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    function toText(totalMinutes) {
        var m = Math.max(0, parseInt(totalMinutes, 10) || 0);
        var h = Math.floor(m / 60);
        var r = m % 60;
        if (h <= 0) return r + 'm';
        if (r <= 0) return h + 'h';
        return h + 'h ' + r + 'm';
    }

    function refreshLiveActual() {
        var now = Date.now();
        document.querySelectorAll('.js-live-actual').forEach(function (el) {
            var base = parseInt(el.getAttribute('data-base-minutes') || '0', 10) || 0;
            var openStart = el.getAttribute('data-open-start') || '';
            if (!openStart) {
                el.textContent = toText(base);
                return;
            }
            var startMs = Date.parse(openStart);
            if (isNaN(startMs)) {
                el.textContent = toText(base);
                return;
            }
            var extra = Math.max(0, Math.floor((now - startMs) / 60000));
            el.textContent = toText(base + extra);
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.js-quick-service-select').forEach(function (serviceSelect) {
            var wrap = serviceSelect.closest('form');
            if (!wrap) return;
            var estimatedInput = wrap.querySelector('.js-quick-estimated');
            var assignedSelect = wrap.querySelector('.js-quick-assigned');
            var laborInput = wrap.querySelector('.js-quick-labor-id');
            var groupInput = wrap.querySelector('.js-quick-group-id');
            serviceSelect.addEventListener('change', function () {
                var selected = serviceSelect.options[serviceSelect.selectedIndex];
                if (!selected) return;
                var type = selected.getAttribute('data-type') || '';
                var itemId = parseInt(selected.getAttribute('data-id') || '0', 10) || 0;
                if (laborInput) laborInput.value = (type === 'labor' && itemId > 0) ? String(itemId) : '';
                if (groupInput) groupInput.value = (type === 'service_group' && itemId > 0) ? String(itemId) : '';
                var estimated = parseInt(selected.getAttribute('data-estimated') || '0', 10) || 0;
                var assigned = parseInt(selected.getAttribute('data-assigned') || '0', 10) || 0;
                if (estimatedInput && estimated > 0) estimatedInput.value = String(estimated);
                if (assignedSelect) {
                    assignedSelect.value = assigned > 0 ? String(assigned) : '';
                }
            });
        });

        refreshLiveActual();
        setInterval(refreshLiveActual, 30000);
    });
})();
</script>
@endpush