@extends('layouts.app')

@section('title', 'Detail Laporan')

@section('content')

{{-- ── Deteksi user QC dan tipe audit mesin ── --}}
@php
    $qcDept   = \App\Models\Department::whereRaw("LOWER(name) LIKE '%quality%'")
                    ->orWhereRaw("LOWER(name) LIKE '%qc%'")
                    ->first();
    $isQcUser = auth()->user()->role === 'staff_departemen'
                && $qcDept
                && auth()->user()->department_id == $qcDept->id;

    $isMachineAuditReport = $report->auditType && strtolower($report->auditType->name) === 'mesin';
@endphp

<div class="container-fluid">
    <!-- Tombol Kembali -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ route('reports.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Kembali ke Daftar Laporan
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Konten Utama -->
        <div class="col-lg-8">
            <!-- Header Laporan -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <h5 class="mb-1">
                                <i class="bi bi-file-earmark-text-fill"></i> {{ $report->report_number }}
                            </h5>
                            <small class="opacity-75">
                                <i class="bi bi-person"></i> {{ $report->auditor->name }} •
                                <i class="bi bi-calendar3"></i> {{ $report->submitted_at ? $report->submitted_at->format('d M Y H:i') : 'Belum terkirim' }}
                            </small>
                        </div>
                        <div class="mt-2 mt-md-0">
                            {!! $report->status_badge !!}
                        </div>
                    </div>
                </div>

                <div class="card-body p-4">

                    {{-- ════ BANNER MESIN — hanya audit mesin dengan machine_name ════ --}}
                    @if($isMachineAuditReport && $report->machine_name)
                        <div class="machine-banner mb-4">
                            <div class="d-flex align-items-center gap-3">
                                <div class="machine-icon-circle">
                                    <i class="bi bi-gear-fill"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="text-muted small fw-semibold mb-1" style="font-size:0.7rem; letter-spacing:0.5px; text-transform:uppercase;">
                                        <i class="bi bi-gear"></i> Mesin yang Dilaporkan
                                    </div>
                                    <div class="machine-name-text">{{ $report->machine_name }}</div>
                                </div>
                                <span class="badge bg-warning text-dark px-3 py-2">
                                    <i class="bi bi-tools"></i> Audit Mesin
                                </span>
                            </div>
                        </div>
                    @endif
                    {{-- ════ END BANNER MESIN ════ --}}

                    <!-- Grid Info -->
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="info-item">
                                <label class="info-label">
                                    <i class="bi bi-clipboard-check text-primary"></i> Tipe Audit
                                </label>
                                <div class="info-value">
                                    <span class="badge bg-info bg-opacity-10 text-info border border-info">
                                        {{ $report->auditType->name }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="info-item">
                                <label class="info-label">
                                    <i class="bi bi-building text-primary"></i> Departemen
                                </label>
                                <div class="info-value">{{ $report->department->name }}</div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="info-item">
                                <label class="info-label">
                                    <i class="bi bi-geo-alt text-primary"></i> Lokasi
                                </label>
                                <div class="info-value">{{ $report->location }}</div>
                            </div>
                        </div>

                        {{-- ════ INFO MESIN di Grid — hanya audit mesin ════ --}}
                        @if($isMachineAuditReport)
                            <div class="col-md-6">
                                <div class="info-item info-item-machine">
                                    <label class="info-label">
                                        <i class="bi bi-gear-fill text-warning"></i> Nama Mesin
                                    </label>
                                    <div class="info-value fw-bold">
                                        {{ $report->machine_name ?? '—' }}
                                    </div>
                                </div>
                            </div>
                        @else
                            {{-- Audit non-mesin: tampilkan Jenis Masalah di posisi ini --}}
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">
                                        <i class="bi bi-exclamation-triangle text-primary"></i> Jenis Masalah
                                    </label>
                                    <div class="info-value">{{ $report->issue_type }}</div>
                                </div>
                            </div>
                        @endif

                        {{-- Jenis Masalah — untuk audit mesin tampil di baris sendiri agar menonjol --}}
                        @if($isMachineAuditReport)
                            <div class="col-12">
                                <div class="info-item">
                                    <label class="info-label">
                                        <i class="bi bi-exclamation-triangle text-primary"></i> Jenis Masalah
                                    </label>
                                    <div class="info-value">{{ $report->issue_type }}</div>
                                </div>
                            </div>
                        @endif

                        <div class="col-12">
                            <div class="info-item">
                                <label class="info-label">
                                    <i class="bi bi-file-text text-primary"></i> Deskripsi Masalah
                                </label>
                                <div class="info-value description-text">{{ $report->description }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Timeline -->
                    @if($report->fixed_at || $report->approved_at)
                        <div class="timeline mt-4 pt-4 border-top">
                            <h6 class="fw-bold mb-3"><i class="bi bi-clock-history"></i> Timeline</h6>
                            <div class="timeline-items">
                                <div class="timeline-item">
                                    <div class="timeline-icon bg-primary">
                                        <i class="bi bi-send"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <small class="text-muted">{{ $report->submitted_at->format('d M Y H:i') }}</small>
                                        <p class="mb-0 fw-semibold">Laporan Terkirim</p>
                                    </div>
                                </div>
                                @if($report->fixed_at)
                                    <div class="timeline-item">
                                        <div class="timeline-icon bg-success">
                                            <i class="bi bi-check-circle"></i>
                                        </div>
                                        <div class="timeline-content">
                                            <small class="text-muted">{{ $report->fixed_at->format('d M Y H:i') }}</small>
                                            <p class="mb-0 fw-semibold">Selesai Diperbaiki</p>
                                        </div>
                                    </div>
                                @endif
                                @if($report->approved_at)
                                    <div class="timeline-item">
                                        <div class="timeline-icon bg-success">
                                            <i class="bi bi-check-circle-fill"></i>
                                        </div>
                                        <div class="timeline-content">
                                            <small class="text-muted">{{ $report->approved_at->format('d M Y H:i') }}</small>
                                            <p class="mb-0 fw-semibold">Disetujui</p>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Foto Masalah -->
            @php
                $photos = is_array($report->photos) ? $report->photos : (is_string($report->photos) ? json_decode($report->photos, true) : []);
            @endphp
            @if($photos && count($photos) > 0)
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-white">
                        <h6 class="mb-0 fw-bold">
                            <i class="bi bi-camera-fill text-primary"></i> Foto Masalah ({{ count($photos) }})
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row g-3">
                            @foreach($photos as $index => $photo)
                                <div class="col-6 col-md-4">
                                    <div class="photo-item" onclick="openImageModal('{{ Storage::url($photo) }}')">
                                        <img src="{{ Storage::url($photo) }}" class="img-fluid rounded" alt="Foto Masalah {{ $index + 1 }}">
                                        <div class="photo-overlay"><i class="bi bi-zoom-in"></i></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            <!-- Deadline Card -->
            @if($report->deadline)
                @php
                    $deadline    = \Carbon\Carbon::parse($report->deadline);
                    $now         = \Carbon\Carbon::now();
                    $diffSeconds = $now->diffInSeconds($deadline, false);
                    $isFixed     = in_array($report->status, ['fixed', 'approved', 'final_approved']);
                    $isOverdue   = $diffSeconds < 0 && !$isFixed;
                @endphp
                <div class="card shadow-sm mb-4 {{ $isFixed ? 'border-success' : ($isOverdue ? 'border-danger' : 'border-warning') }}">
                    <div class="card-body">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="deadline-icon {{ $isFixed ? 'bg-success' : ($isOverdue ? 'bg-danger' : 'bg-warning') }}">
                                    <i class="bi bi-alarm"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="fw-bold mb-2">Deadline Perbaikan</h6>
                                <p class="mb-2 fw-bold fs-6">
                                    <i class="bi bi-calendar-event me-1"></i>
                                    {{ $deadline->format('d') }} {{ $deadline->locale('id')->monthName }} {{ $deadline->format('Y') }}
                                    pukul {{ $deadline->format('H:i') }} WIB
                                </p>
                                @if($isFixed)
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle-fill"></i> Selesai Tepat Waktu
                                    </span>
                                @else
                                    <div id="deadlineCountdown" class="mt-1"></div>
                                @endif
                                @if($report->deadline_reason)
                                    <div class="bg-light p-3 rounded mt-3">
                                        <small class="text-muted d-block mb-1">
                                            <i class="bi bi-chat-left-text"></i> Keterangan:
                                        </small>
                                        <p class="mb-0 small">{{ $report->deadline_reason }}</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Alasan Penolakan oleh Auditor -->
            @if(in_array($report->status, ['rejected', 'rejected_by_auditor', 'in_progress']) && $report->rejection_reason)
                <div class="card shadow-sm mb-4 border-danger">
                    <div class="card-body">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="deadline-icon bg-danger"><i class="bi bi-x-circle"></i></div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="fw-bold text-danger mb-2">Alasan Penolakan Auditor</h6>
                                <p class="mb-0">{{ $report->rejection_reason }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Alasan Penolakan oleh QC -->
            @if(in_array($report->status, ['rejected_by_qc']) && $report->qc_rejection_reason)
                <div class="card shadow-sm mb-4 border-danger">
                    <div class="card-body">
                        <div class="d-flex align-items-start">
                            <div class="flex-shrink-0 me-3">
                                <div class="deadline-icon bg-danger"><i class="bi bi-clipboard2-x"></i></div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="fw-bold text-danger mb-2">Alasan Penolakan QC</h6>
                                <p class="mb-0">{{ $report->qc_rejection_reason }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Respons Perbaikan -->
            @if($report->responses && $report->responses->count() > 0)
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-white">
                        <h6 class="mb-0 fw-bold">
                            <i class="bi bi-chat-dots-fill text-primary"></i> Respons Perbaikan ({{ $report->responses->count() }})
                        </h6>
                    </div>
                    <div class="card-body">
                        @foreach($report->responses as $response)
                            <div class="response-item">
                                <div class="d-flex align-items-start mb-3">
                                    <div class="avatar-circle me-3">{{ substr($response->user->name, 0, 1) }}</div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1 fw-bold">{{ $response->user->name }}</h6>
                                        <small class="text-muted">
                                            <i class="bi bi-clock"></i> {{ $response->created_at->format('d M Y H:i') }}
                                        </small>
                                    </div>
                                </div>
                                <div class="response-content">
                                    <p class="mb-3">{{ $response->description }}</p>
                                    @php
                                        $responsePhotos = is_array($response->photos) ? $response->photos : (is_string($response->photos) ? json_decode($response->photos, true) : []);
                                    @endphp
                                    @if($responsePhotos && count($responsePhotos) > 0)
                                        <div class="mb-3">
                                            <small class="text-muted fw-semibold d-block mb-2">
                                                <i class="bi bi-camera"></i> Foto Perbaikan ({{ count($responsePhotos) }})
                                            </small>
                                            <div class="row g-2">
                                                @foreach($responsePhotos as $index => $photo)
                                                    <div class="col-6 col-md-4">
                                                        <div class="photo-item" onclick="openImageModal('{{ Storage::url($photo) }}')">
                                                            <img src="{{ Storage::url($photo) }}" class="img-fluid rounded" alt="Foto Perbaikan {{ $index + 1 }}">
                                                            <div class="photo-overlay"><i class="bi bi-zoom-in"></i></div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar Aksi -->
        <div class="col-lg-4">
            <div class="card shadow-sm sticky-sidebar">
                <div class="card-header bg-white">
                    <h6 class="mb-0 fw-bold">
                        <i class="bi bi-lightning-charge-fill text-warning"></i> Aksi Tersedia
                    </h6>
                </div>
                <div class="card-body">

                    {{-- ── QC Audit Mesin ── --}}
                    @if($isQcUser && $isMachineAuditReport)
                        @if(in_array($report->status, ['qc_review', 'rejected_by_auditor']))
                            @if($report->status === 'rejected_by_auditor' && $report->rejection_reason)
                                <div class="alert alert-danger py-2 small mb-3">
                                    <strong><i class="bi bi-x-circle"></i> Ditolak Auditor:</strong><br>
                                    {{ $report->rejection_reason }}
                                </div>
                            @endif
                            <form action="{{ route('reports.qc-approve', $report->id) }}" method="POST" class="mb-2">
                                @csrf
                                <button type="submit" class="btn btn-success w-100"
                                    onclick="return confirm('Verifikasi dan teruskan ke Audit Mesin?')">
                                    <i class="bi bi-clipboard2-check-fill"></i> Verifikasi & Teruskan ke Auditor
                                </button>
                            </form>
                            <button type="button" class="btn btn-danger w-100 mb-3"
                                data-bs-toggle="modal" data-bs-target="#qcRejectModal">
                                <i class="bi bi-x-circle-fill"></i> Tolak — Kembalikan ke Maintenance
                            </button>
                            <div class="alert alert-info py-2 small">
                                <i class="bi bi-info-circle"></i> Verifikasi hasil perbaikan sebelum diteruskan ke Auditor Mesin
                            </div>
                        @else
                            <div class="alert alert-secondary py-2 small">
                                <i class="bi bi-info-circle"></i> Tidak ada aksi tersedia untuk status ini
                            </div>
                        @endif

                    {{-- ── QC Audit Lain ── --}}
                    @elseif($isQcUser && !$isMachineAuditReport && auth()->user()->department_id === $report->department_id)
                        @if($report->status === 'submitted')
                            <button type="button" class="btn btn-warning w-100 mb-3" data-bs-toggle="modal" data-bs-target="#startProgressModal">
                                <i class="bi bi-play-circle-fill"></i> Mulai Perbaikan
                            </button>
                        @endif
                        @if($report->status === 'in_progress')
                            <button type="button" class="btn btn-primary w-100 mb-3" data-bs-toggle="modal" data-bs-target="#responseModal">
                                <i class="bi bi-check-circle-fill"></i> Kirim Respons Perbaikan
                            </button>
                        @endif
                        @if($report->status === 'rejected')
                            <div class="alert alert-danger py-2 small mb-3">
                                <strong><i class="bi bi-x-circle"></i> Ditolak Auditor:</strong><br>
                                {{ $report->rejection_reason }}
                            </div>
                            <button type="button" class="btn btn-warning w-100 mb-2" data-bs-toggle="modal" data-bs-target="#startProgressModal">
                                <i class="bi bi-play-circle-fill"></i> Mulai Perbaikan Ulang
                            </button>
                        @endif

                    {{-- ── MAINTENANCE / STAFF DEPT BIASA ── --}}
                    @elseif(auth()->user()->role === 'staff_departemen' && !$isQcUser && auth()->user()->department_id === $report->department_id)
                        @if($report->status === 'submitted')
                            <button type="button" class="btn btn-warning w-100 mb-3" data-bs-toggle="modal" data-bs-target="#startProgressModal">
                                <i class="bi bi-play-circle-fill"></i> Mulai Perbaikan
                            </button>
                        @endif
                        @if($report->status === 'in_progress')
                            <button type="button" class="btn btn-primary w-100 mb-3" data-bs-toggle="modal" data-bs-target="#responseModal">
                                <i class="bi bi-check-circle-fill"></i> Kirim Respons Perbaikan
                            </button>
                        @endif
                        @if($report->status === 'rejected_by_qc')
                            <div class="alert alert-danger py-2 small mb-3">
                                <strong><i class="bi bi-x-circle"></i> Ditolak QC:</strong><br>
                                {{ $report->qc_rejection_reason }}
                            </div>
                            <button type="button" class="btn btn-warning w-100 mb-2" data-bs-toggle="modal" data-bs-target="#startProgressModal">
                                <i class="bi bi-play-circle-fill"></i> Mulai Perbaikan Ulang
                            </button>
                        @endif
                        @if($report->status === 'rejected')
                            <div class="alert alert-danger py-2 small mb-3">
                                <strong><i class="bi bi-x-circle"></i> Ditolak Auditor:</strong><br>
                                {{ $report->rejection_reason }}
                            </div>
                            <button type="button" class="btn btn-warning w-100 mb-2" data-bs-toggle="modal" data-bs-target="#startProgressModal">
                                <i class="bi bi-play-circle-fill"></i> Mulai Perbaikan Ulang
                            </button>
                        @endif
                        @if($report->status === 'rejected_by_auditor')
                            <div class="alert alert-danger py-2 small mb-3">
                                <strong><i class="bi bi-x-circle"></i> Ditolak Auditor Final:</strong><br>
                                {{ $report->rejection_reason }}
                            </div>
                            <button type="button" class="btn btn-warning w-100 mb-2" data-bs-toggle="modal" data-bs-target="#startProgressModal">
                                <i class="bi bi-play-circle-fill"></i> Mulai Perbaikan Ulang
                            </button>
                        @endif

                    {{-- ── AUDITOR ── --}}
                    @elseif(auth()->user()->role === 'auditor' && auth()->user()->id === $report->auditor_id)
                        @if($isMachineAuditReport)
                            @if($report->status === 'approved')
                                <div class="alert alert-success py-2 small mb-3">
                                    <i class="bi bi-clipboard2-check-fill"></i>
                                    <strong>Sudah diverifikasi QC.</strong> Lakukan persetujuan final.
                                </div>
                                <form action="{{ route('reports.approve', $report->id) }}" method="POST" class="mb-2">
                                    @csrf
                                    <button type="submit" class="btn btn-success w-100"
                                        onclick="return confirm('Setujui final laporan ini?')">
                                        <i class="bi bi-check-circle-fill"></i> Setujui Final
                                    </button>
                                </form>
                                <button type="button" class="btn btn-danger w-100 mb-3"
                                    data-bs-toggle="modal" data-bs-target="#rejectModal">
                                    <i class="bi bi-x-circle-fill"></i> Tolak — Kembalikan ke Maintenance
                                </button>
                            @elseif(in_array($report->status, ['submitted', 'in_progress', 'qc_review', 'rejected_by_qc', 'final_approved']))
                                <div class="alert alert-info py-2 small">
                                    <i class="bi bi-info-circle"></i>
                                    @if($report->status === 'submitted')
                                        Menunggu Maintenance memulai perbaikan.
                                    @elseif($report->status === 'in_progress')
                                        {{ $report->rejection_reason ? 'Laporan ditolak. Maintenance sedang memperbaiki ulang.' : 'Maintenance sedang mengerjakan perbaikan.' }}
                                    @elseif($report->status === 'qc_review')
                                        Menunggu verifikasi QC.
                                    @elseif($report->status === 'rejected_by_qc')
                                        QC mengembalikan ke Maintenance.
                                    @elseif($report->status === 'final_approved')
                                        Laporan telah selesai & disetujui final.
                                    @endif
                                </div>
                            @endif
                        @else
                            @if($report->status === 'fixed')
                                <form action="{{ route('reports.approve', $report) }}" method="POST" class="mb-2">
                                    @csrf
                                    <button type="submit" class="btn btn-success w-100"
                                        onclick="return confirm('Setujui laporan ini?')">
                                        <i class="bi bi-check-circle-fill"></i> Setujui Laporan
                                    </button>
                                </form>
                                <button type="button" class="btn btn-danger w-100 mb-3"
                                    data-bs-toggle="modal" data-bs-target="#rejectModal">
                                    <i class="bi bi-x-circle-fill"></i> Tolak Laporan
                                </button>
                            @endif
                        @endif

                        {{-- Edit: hanya saat submitted atau rejected --}}
                        @if(in_array($report->status, ['submitted', 'rejected']))
                            <a href="{{ route('reports.edit', $report) }}" class="btn btn-outline-primary w-100 mb-2">
                                <i class="bi bi-pencil-square"></i> Edit Laporan
                            </a>
                        @endif

                        {{-- Hapus: auditor bisa hapus laporannya sendiri di status apapun --}}
                        <form action="{{ route('reports.destroy', $report) }}" method="POST" class="mt-2">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger w-100"
                                onclick="return confirm('Hapus laporan ini? Semua data dan foto akan ikut terhapus dan tidak dapat dibatalkan.')">
                                <i class="bi bi-trash3"></i> Hapus Laporan
                            </button>
                        </form>
                    @endif

                    {{-- ── Alur Audit Mesin ── --}}
                    @if($isMachineAuditReport)
                        @php
                            $steps = [
                                ['submitted',      'Diajukan',        'primary'],
                                ['in_progress',    'Maintenance',     'warning'],
                                ['qc_review',      'Verifikasi QC',  'info'],
                                ['approved',       'Disetujui QC',   'teal'],
                                ['final_approved', 'Disetujui Final','success'],
                            ];
                            $order  = array_column($steps, 0);
                            $curIdx = array_search($report->status, $order);
                        @endphp
                        <div class="card bg-light border-0 mb-3">
                            <div class="card-body p-3">
                                <h6 class="small fw-bold mb-3"><i class="bi bi-diagram-3"></i> Alur Audit Mesin</h6>
                                @foreach($steps as $i => [$key, $label, $color])
                                    <div class="d-flex align-items-center mb-2">
                                        @if($curIdx !== false && $i < $curIdx)
                                            <i class="bi bi-check-circle-fill text-success me-2 flex-shrink-0"></i>
                                        @elseif($report->status === $key)
                                            <i class="bi bi-arrow-right-circle-fill text-warning me-2 flex-shrink-0"></i>
                                        @else
                                            <i class="bi bi-circle text-muted me-2 flex-shrink-0"></i>
                                        @endif
                                        <small class="{{ $report->status === $key ? 'fw-bold' : 'text-muted' }}">{{ $label }}</small>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Info Laporan -->
                    <div class="card bg-light border-0">
                        <div class="card-body p-3">
                            <h6 class="small fw-bold mb-2">Informasi Laporan</h6>
                            <ul class="list-unstyled small mb-0">
                                {{-- Nama Mesin di sidebar juga --}}
                                @if($isMachineAuditReport && $report->machine_name)
                                    <li class="mb-2">
                                        <i class="bi bi-gear-fill text-warning"></i>
                                        <strong>Mesin:</strong><br>
                                        <span class="ms-3 fw-bold text-dark">{{ $report->machine_name }}</span>
                                    </li>
                                @endif
                                <li class="mb-2">
                                    <i class="bi bi-person text-muted"></i>
                                    <strong>Pelapor:</strong><br>
                                    <span class="ms-3">{{ $report->auditor->name }}</span>
                                </li>
                                <li class="mb-2">
                                    <i class="bi bi-calendar3 text-muted"></i>
                                    <strong>Dibuat:</strong><br>
                                    <span class="ms-3">{{ $report->created_at->format('d M Y H:i') }}</span>
                                </li>
                                @if($report->qc_verified_at ?? false)
                                    <li class="mb-2">
                                        <i class="bi bi-clipboard2-check text-muted"></i>
                                        <strong>Diverifikasi QC:</strong><br>
                                        <span class="ms-3">{{ $report->qc_verified_at->format('d M Y H:i') }}</span>
                                    </li>
                                @endif
                                @if($report->final_approved_at ?? false)
                                    <li class="mb-0">
                                        <i class="bi bi-check-circle text-muted"></i>
                                        <strong>Disetujui Final:</strong><br>
                                        <span class="ms-3">{{ $report->final_approved_at->format('d M Y H:i') }}</span>
                                    </li>
                                @endif
                                @if($report->updated_at != $report->created_at && !($report->qc_verified_at ?? false))
                                    <li class="mb-0">
                                        <i class="bi bi-pencil text-muted"></i>
                                        <strong>Update Terakhir:</strong><br>
                                        <span class="ms-3">{{ $report->updated_at->format('d M Y H:i') }}</span>
                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Respons -->
<div class="modal fade" id="responseModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('reports.respond', $report) }}" method="POST" enctype="multipart/form-data" id="responseForm">
                @csrf
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="bi bi-send"></i> Kirim Respons Perbaikan</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Deskripsi Perbaikan <span class="text-danger">*</span></label>
                        <textarea name="description" class="form-control" rows="4" required
                            placeholder="Jelaskan secara detail:&#10;- Apa yang telah diperbaiki?&#10;- Bagaimana cara memperbaikinya?&#10;- Apakah masalah sudah teratasi sepenuhnya?"></textarea>
                        <small class="text-muted">Minimal 10 karakter</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Foto Setelah Perbaikan <span class="text-danger">*</span></label>
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <button type="button" class="btn btn-outline-primary w-100 btn-sm" onclick="openResponseCamera()">
                                    <i class="bi bi-camera-fill"></i> Kamera
                                </button>
                            </div>
                            <div class="col-6">
                                <button type="button" class="btn btn-outline-primary w-100 btn-sm"
                                    onclick="document.getElementById('responsePhotos').click()">
                                    <i class="bi bi-folder2-open"></i> Galeri
                                </button>
                            </div>
                        </div>
                        <input type="file" name="photos[]" id="responsePhotos" class="d-none" accept="image/*" multiple required>
                        <small class="text-muted d-block">Upload foto kondisi setelah diperbaiki</small>
                        <div id="responsePhotoList" class="mt-3"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="submitResponseBtn">
                        <i class="bi bi-send"></i> Kirim Respons
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Mulai Perbaikan -->
<div class="modal fade" id="startProgressModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('reports.start-progress', $report->id) }}" method="POST">
                @csrf
                <div class="modal-header bg-warning text-dark">
                    <h5 class="modal-title"><i class="bi bi-play-circle"></i> Mulai Perbaikan Audit</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info"><i class="bi bi-info-circle"></i> Tentukan deadline dan rencana perbaikan</div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold"><i class="bi bi-calendar-event"></i> Tanggal Deadline <span class="text-danger">*</span></label>
                        <input type="date" class="form-control @error('deadline_date') is-invalid @enderror"
                               id="deadline_date" name="deadline_date"
                               min="{{ date('Y-m-d', strtotime('+1 day')) }}"
                               value="{{ old('deadline_date') }}" required>
                        @error('deadline_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold"><i class="bi bi-clock"></i> Jam Deadline <span class="text-danger">*</span></label>
                        <input type="time" class="form-control @error('deadline_time') is-invalid @enderror"
                               id="deadline_time" name="deadline_time"
                               value="{{ old('deadline_time', '07:00') }}" required>
                        @error('deadline_time')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <small class="text-muted">Contoh: 07:00 (pukul 7 pagi)</small>
                    </div>
                    <div class="alert alert-success d-none py-2 mb-3" id="previewCountdown">
                        <i class="bi bi-hourglass-split"></i> Sisa waktu: <strong id="previewCountdownText"></strong>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold"><i class="bi bi-chat-text"></i> Keterangan & Rencana <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('deadline_reason') is-invalid @enderror"
                                  id="deadline_reason" name="deadline_reason" rows="4" required
                                  placeholder="Jelaskan rencana dan alasan deadline">{{ old('deadline_reason') }}</textarea>
                        @error('deadline_reason')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning fw-bold"><i class="bi bi-play-circle"></i> Mulai Perbaikan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Tolak (Auditor) -->
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('reports.reject', $report) }}" method="POST">
                @csrf
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title"><i class="bi bi-x-circle"></i> Tolak Laporan</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        {{ $isMachineAuditReport ? 'Laporan akan dikembalikan ke Maintenance untuk diperbaiki ulang' : 'Laporan akan dikembalikan ke departemen untuk diperbaiki ulang' }}
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Alasan Penolakan <span class="text-danger">*</span></label>
                        <textarea name="rejection_reason" class="form-control" rows="4" required
                            placeholder="Jelaskan secara detail apa yang kurang dan perlu diperbaiki"></textarea>
                        <small class="text-muted">Minimal 10 karakter</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger"><i class="bi bi-x-circle"></i> Tolak Laporan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Gambar Penuh -->
<div class="modal fade" id="imageModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0 position-relative">
                <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3"
                    data-bs-dismiss="modal" style="z-index:1;"></button>
                <img src="" id="modalImage" class="img-fluid w-100 rounded" alt="Gambar Penuh">
            </div>
        </div>
    </div>
</div>

<!-- Modal Tolak QC -->
<div class="modal fade" id="qcRejectModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ route('reports.qc-reject', $report->id) }}" method="POST">
                @csrf
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title"><i class="bi bi-x-circle"></i> Tolak & Kembalikan ke Maintenance</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle"></i> Laporan dikembalikan ke Maintenance untuk diperbaiki ulang
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Alasan Penolakan QC <span class="text-danger">*</span></label>
                        <textarea name="qc_rejection_reason" class="form-control" rows="4" required
                            placeholder="Apa yang kurang? Apa yang perlu diperbaiki?"></textarea>
                        <small class="text-muted">Minimal 10 karakter</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger"><i class="bi bi-x-circle"></i> Tolak & Kembalikan</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .bg-gradient-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .card { border: none; border-radius: 12px; }
    .sticky-sidebar { position: sticky; top: 80px; }

    /* ── Machine Banner ── */
    .machine-banner {
        background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
        border: 2px solid #ffc107;
        border-radius: 12px;
        padding: 1rem 1.25rem;
    }
    .machine-icon-circle {
        width: 52px; height: 52px; border-radius: 50%;
        background: linear-gradient(135deg, #ffc107, #ff9800);
        display: flex; align-items: center; justify-content: center;
        color: white; font-size: 1.5rem; flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(255,193,7,0.4);
    }
    .machine-name-text {
        font-size: 1.2rem; font-weight: 700; color: #212529;
        letter-spacing: 0.3px;
    }

    .info-item { padding: 12px; background: #f8f9fa; border-radius: 8px; border-left: 3px solid #667eea; }
    .info-item-machine { border-left-color: #ffc107; background: #fff8e1; }
    .info-label { display: block; font-size: 0.75rem; font-weight: 600; color: #6c757d; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
    .info-value { font-size: 1rem; font-weight: 500; color: #212529; }
    .description-text { line-height: 1.7; white-space: pre-wrap; }

    .photo-item { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
    .photo-item:hover { transform: scale(1.05); }
    .photo-item img { width: 100%; height: 200px; object-fit: cover; display: block; }
    .photo-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
    .photo-item:hover .photo-overlay { opacity: 1; }
    .photo-overlay i { color: white; font-size: 2rem; }

    .timeline-items { position: relative; }
    .timeline-item { display: flex; align-items: flex-start; margin-bottom: 1.5rem; position: relative; }
    .timeline-item:not(:last-child)::after { content: ''; position: absolute; left: 19px; top: 40px; bottom: -24px; width: 2px; background: #dee2e6; }
    .timeline-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 15px; flex-shrink: 0; position: relative; z-index: 1; }
    .timeline-content { flex: 1; padding-top: 5px; }

    .deadline-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; }

    .response-item { padding: 1.5rem; background: #f8f9fa; border-radius: 12px; margin-bottom: 1rem; }
    .response-item:last-child { margin-bottom: 0; }
    .avatar-circle { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.25rem; flex-shrink: 0; }
    .response-content { padding: 1rem; background: white; border-radius: 8px; }

    @media (max-width: 767.98px) {
        .info-item { padding: 10px; margin-bottom: 10px; }
        .photo-item img { height: 150px; }
        .sticky-sidebar { position: static; }
        .deadline-icon { width: 40px; height: 40px; font-size: 1.2rem; }
        .avatar-circle { width: 35px; height: 35px; font-size: 1rem; }
        .machine-name-text { font-size: 1rem; }
        .machine-icon-circle { width: 42px; height: 42px; font-size: 1.2rem; }
    }
    @media (max-width: 991.98px) {
        .sticky-sidebar { margin-top: 1.5rem; }
    }
</style>
@endpush

@push('scripts')
<script>
function openImageModal(imageSrc) {
    document.getElementById('modalImage').src = imageSrc;
    new bootstrap.Modal(document.getElementById('imageModal')).show();
}

function openResponseCamera() {
    const input = document.getElementById('responsePhotos');
    const cam = document.createElement('input');
    cam.type = 'file'; cam.accept = 'image/*'; cam.capture = 'environment'; cam.multiple = true;
    cam.onchange = function (e) {
        const dt = new DataTransfer();
        [...Array.from(input.files), ...Array.from(e.target.files)].forEach(f => dt.items.add(f));
        input.files = dt.files;
        input.dispatchEvent(new Event('change', { bubbles: true }));
    };
    cam.click();
}

document.getElementById('responsePhotos')?.addEventListener('change', function (e) {
    const list = document.getElementById('responsePhotoList');
    list.innerHTML = '';
    Array.from(e.target.files).forEach((file, index) => {
        if (!file.type.startsWith('image/')) return;
        const reader = new FileReader();
        reader.onload = function (ev) {
            const item = document.createElement('div');
            item.className = 'border rounded p-2 mb-2 d-flex align-items-center gap-2';
            item.innerHTML = `
                <img src="${ev.target.result}" style="width:60px;height:60px;object-fit:cover;border-radius:8px;">
                <div class="flex-grow-1">
                    <div class="fw-bold small">${file.name}</div>
                    <div class="text-muted" style="font-size:0.75rem;">${(file.size/1024).toFixed(1)} KB → dikompres ~500KB</div>
                </div>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeResponsePhoto(${index})">
                    <i class="bi bi-x"></i>
                </button>`;
            list.appendChild(item);
        };
        reader.readAsDataURL(file);
    });
});

function removeResponsePhoto(index) {
    const input = document.getElementById('responsePhotos');
    const dt = new DataTransfer();
    Array.from(input.files).forEach((f, i) => { if (i !== index) dt.items.add(f); });
    input.files = dt.files;
    input.dispatchEvent(new Event('change', { bubbles: true }));
}

document.getElementById('responseForm')?.addEventListener('submit', function () {
    const btn = document.getElementById('submitResponseBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Mengirim...';
});

function formatDiff(ms) {
    const total   = Math.floor(ms / 1000);
    const days    = Math.floor(total / 86400);
    const hours   = Math.floor((total % 86400) / 3600);
    const minutes = Math.floor((total % 3600) / 60);
    const seconds = total % 60;
    let parts = [];
    if (days)    parts.push(days + ' hari');
    if (hours)   parts.push(hours + ' jam');
    if (minutes) parts.push(minutes + ' menit');
    if (seconds && days === 0) parts.push(seconds + ' detik');
    return parts.join(' ') || 'kurang dari 1 menit';
}

const dateInput   = document.getElementById('deadline_date');
const timeInput   = document.getElementById('deadline_time');
const previewBox  = document.getElementById('previewCountdown');
const previewText = document.getElementById('previewCountdownText');

function updatePreview() {
    if (!dateInput || !timeInput) return;
    const target = new Date(dateInput.value + 'T' + timeInput.value + ':00');
    const diff   = target - new Date();
    if (!dateInput.value || !timeInput.value || diff <= 0) {
        previewBox?.classList.add('d-none'); return;
    }
    previewBox?.classList.remove('d-none');
    previewText.textContent = formatDiff(diff);
}
dateInput?.addEventListener('change', updatePreview);
timeInput?.addEventListener('change', updatePreview);
updatePreview();

@if($report->deadline ?? false)
const deadlineTarget = new Date('{{ \Carbon\Carbon::parse($report->deadline)->format('Y-m-d\TH:i:s') }}');
const countdownEl    = document.getElementById('deadlineCountdown');
function tickCountdown() {
    if (!countdownEl) return;
    const diff = deadlineTarget - new Date();
    if (diff <= 0) {
        countdownEl.innerHTML = '<span class="badge bg-danger fs-6"><i class="bi bi-exclamation-circle"></i> Deadline telah terlewat!</span>';
        return;
    }
    countdownEl.innerHTML = '<span class="badge bg-warning text-dark fs-6"><i class="bi bi-hourglass-split"></i> Sisa: <strong>' + formatDiff(diff) + '</strong></span>';
    setTimeout(tickCountdown, 1000);
}
tickCountdown();
@endif
</script>
@endpush